+**Single value (like today)** +This will apply to the gap property (like today) ```10px``` -**Two values**
-This will apply top-and-bottom | left-and-right
+**Two values** +This will apply top-and-bottom | left-and-right ```8px 64px``` -**Three values**
-This will apply top | right-and-left | bottom
+**Three values** +This will apply top | right-and-left | bottom ```16px 8px 32px``` -**Four values**
-This will apply top | right | bottom | left
+**Four values** +This will apply top | right | bottom | left ```2px 4px 8px 16px``` --- diff --git a/pages/available-tokens/typography-tokens.pt-br.md b/obsidian_vault/available-tokens/typography-tokens.md similarity index 97% rename from pages/available-tokens/typography-tokens.pt-br.md rename to obsidian_vault/available-tokens/typography-tokens.md index b64bfca..6e404ee 100644 --- a/pages/available-tokens/typography-tokens.pt-br.md +++ b/obsidian_vault/available-tokens/typography-tokens.md @@ -33,7 +33,7 @@ An example of a typography token looks like this: ``` -import Callout from 'nextra-theme-docs/callout' +import { Callout } from 'nextra/components'
-
-## Annotate in the plugin
-One way would be to use the Annotate feature inside Tokens Studio for Figma. You would select a single layer, go to the Inspect tab, switch to Debug & Annotate, and use the annotate tool to create annotations for you. Those would not update automatically, and only work for single layers.
-
-import Callout from 'nextra-theme-docs/callout'
-
-
+
+## Annotate in the plugin
+One way would be to use the Annotate feature inside Tokens Studio for Figma. You would select a single layer, go to the Inspect tab, switch to Debug & Annotate, and use the annotate tool to create annotations for you. Those would not update automatically, and only work for single layers.
+
+import { Callout } from 'nextra/components'
+
+
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
The table or spreadsheet view gives you powerful bulk-edit capabilities, such as editing the values of multiple tokens at the same time.
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
+
+If you need multiple color steps, just add more (minimum is 2). `linear-gradient(45deg, #0000FF 0%, #87CEEB 50%, #008000 100%)`
+
+
+### Token References
+The beauty of token gradients is that you can create gradients that reference another token, which is not possible within Figma itself. For example, you can define a gradient using token references by using the `{`, like this: `linear-gradient (45deg, {colors.yellow.400} 0%, {colors.blue.700} 100%)`.
+
+
+### Alpha values (opacity)
+Opacity is supported as well, you can write your gradients like this: `linear-gradient (45deg, rgba({colors.yellow.400}, 0.4) 0%, rgba({colors.blue.700}, 1) 100%)`. The `0.4` and `1` between the rgba brackets are the amounts that define the percentage of the opacity.
+
+
+### Limitations
+- Positioning a gradient on a layer within the plugin is currently not possible. As the plugin only stores the degree of the gradient, without any translation information, it cannot accurately determine the positioning of the gradient on a layer.
+
+
+
+In the creation modal, enter a unique name and select the property (fill, borderRadius, width, height etc.) you want to add to the composition token.
+
+
+
+You can set a raw value or an alias token for the property.
+
+To add another property click on the `+` icon, select the property and enter the value.
+
+
+
+Click `Create`, the composition token can now be applied like any other token.
+
diff --git a/pages/available-tokens/composition-tokens.pt-br.mdx b/pages/available-tokens/composition-tokens.pt-br.mdx
deleted file mode 100644
index 1ec6fc2..0000000
--- a/pages/available-tokens/composition-tokens.pt-br.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
-# Tokens de Composição (Composition Tokens)
-
-Se você estiver em um plano Pro, agora poderá criar e usar tokens de composição.
-
-Os *tokens de composição* (Composition Tokens) são uma maneira de criar um token que é uma combinação de outros tipos de token.
-
-Por exemplo, você deseja criar um único token para um *card* que combine um token de cor, um token de raio da borda (*radius*), tokens de espaçamento e um token de sombra. Isso agora é possível com tokens de composição! :D
-
-import ReactPlayer from 'react-player'
-
-
-
-No modal de criação, insira um nome exclusivo e selecione a propriedade (preenchimento, borderRadius, largura, altura etc.) que deseja adicionar ao token de composição.
-
-
-
-Você pode definir um valor bruto (*raw*) ou um token de alias para a propriedade.
-
-Para adicionar outra propriedade clique no ícone `+`, selecione a propriedade e insira o valor.
-
-
-
-Clique em `Create`, o token de composição agora pode ser aplicado como qualquer outro token.
-
-
+
+---
+
+When in Figma's dev mode, search for **Tokens Studio for Figma** in the `Plugins` tab, and click on save.
+
+
+In the inspect tab, you can then change it from `CSS` to `Tokens Studio for Figma` under the `Language` dropdown menu.
+
+
+---
+### Using Dev mode
+Click on a layer of your element to see the tokens that are applied.
+
+
+You can see the names of all tokens applied to the element which are displayed in the `Inspect panel`.
+
+
+---
+
+import ReactPlayer from 'react-player'
+
+
+
+## Annotate in the plugin
+One way would be to use the Annotate feature inside Tokens Studio for Figma. You would select a single layer, go to the Inspect tab, switch to Debug & Annotate, and use the annotate tool to create annotations for you. Those would not update automatically, and only work for single layers.
+
+import { Callout } from 'nextra/components'
+
+
-
-## Anotar no plugin
-Uma maneira seria usar o recurso *Annotate* dentro do Tokens Studio for Figma. Você pode selecionar uma única camada, ir para a guia *Inspect*, alternar para *Debug* e anotar usando ferramenta. Esses não seriam atualizados automaticamente e funcionariam apenas para camadas únicas.
-
-import Callout from 'nextra-theme-docs/callout'
-
-
+
+## Selecting all layers with a particular token
+
+By clicking on the crosshair icon you can select all the layers that have a particular token.
+
+
+
+
+## Selecting a single layer with a particular token
+
+On the side of the token you can see how many layers a particular token is applied to. By clicking on the layer icon, you get a list of the different layers and you can select any particular layer.
+
+
+
+
+
+## Removing tokens
+
+You can select a single token or `Select all` tokens and click on `Remove selected` to remove the token/s from the layer/s.
+
+
+
+
+
+## Remapping tokens
+
+Click on the `v` icon next to the token to remap it to another token on all the layers that it is applied.
+
+
+
+
\ No newline at end of file
diff --git a/pages/inspect/multi-inspect.pt-br.mdx b/pages/inspect/multi-inspect.pt-br.mdx
deleted file mode 100644
index 49f61c8..0000000
--- a/pages/inspect/multi-inspect.pt-br.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
-# Multi inspecionar
-
-Você pode selecionar qualquer camada e clicar na guia 'Inspecionar' do plug-in para visualizar todos os tokens aplicados.
-
-
-import ReactPlayer from 'react-player'
-
-
-
-
-## Selecionando todas as camadas com um token específico
-
-Ao clicar no ícone de mira, você pode selecionar todas as camadas que possuem um token específico.
-
-
-
-
-## Selecionando uma única camada com um token específico
-
-Na lateral do token, você pode ver a quantas camadas um token específico é aplicado. Ao clicar no ícone da camada, você obtém uma lista das diferentes camadas e pode selecionar qualquer camada específica.
-
-
-
-## Removendo tokens
-
-Você pode selecionar um único token ou `Select all` tokens e clicar em `Remove selected` para remover o(s) token(s) da(s) camada(s).
-
-
-
-## Remapeamento de tokens
-
-Clique no ícone `v` ao lado do token para remapear para outro token em todas as camadas em que ele for aplicado.
-
-
diff --git a/pages/styles/_meta.en.json b/pages/styles/_meta.js
similarity index 92%
rename from pages/styles/_meta.en.json
rename to pages/styles/_meta.js
index 5f23d6c..d400f09 100644
--- a/pages/styles/_meta.en.json
+++ b/pages/styles/_meta.js
@@ -1,4 +1,4 @@
-{
+export default {
"styles": "Importing styles",
"create-styles": "Creating styles",
"keeping-styles-in-sync": "Keeping styles in sync",
diff --git a/pages/styles/create-styles.pt-br.md b/pages/styles/create-styles.md
similarity index 72%
rename from pages/styles/create-styles.pt-br.md
rename to pages/styles/create-styles.md
index e12f710..491f159 100644
--- a/pages/styles/create-styles.pt-br.md
+++ b/pages/styles/create-styles.md
@@ -1,8 +1,14 @@
-### Creating styles
+# Creating styles
You can tell the plugin to create any styles for tokens that have not been created yet. The plugin will respect your naming of your tokens, and convert any group to a `/` separated style.
We also respect some choices you might make on how your styles should be named, in Settings you'll find 2 options:
- Ignore first part of token name for styles: This will strip away the very first part of the token name, so `colors.red.500` becomes `red.500`
-- Prefix styles with Theme name: When using Themes this will prepend the name of the Theme to the created style. So a token `background.default` in the Theme `light` becomes `light.background.default`
\ No newline at end of file
+- Prefix styles with Theme name: When using Themes this will prepend the name of the Theme to the created style. So a token `background.default` in the Theme `light` becomes `light.background.default`
+
+import { Callout } from 'nextra/components'
+
+
+
+Click on the branch name to view all the branches and select a branch you want to switch to.
+
+
+
+
+
+You can also create a new branch by clicking on `Create new branch from` and selecting the branch you want to duplicate.
+
+
+
\ No newline at end of file
diff --git a/pages/sync/branch-switching.pt-br.mdx b/pages/sync/branch-switching.pt-br.mdx
deleted file mode 100644
index 20e770e..0000000
--- a/pages/sync/branch-switching.pt-br.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-# Trocando de branchs
-
-Agora você pode ver e trocar de branches da sua sincronização remota.
-
-Clique no ícone `branch` na parte inferior do plugin para ver a lista de branches.
-
-
-
-
-Clique no nome da ramificação (branch) para ver todas as ramificações (branches) e selecione uma ramificação (branch) para a qual deseja alternar.
-
-
-
-
-Você também pode criar um novo branch clicando em `Create new branch from` e selecionando o branch que deseja duplicar.
-
-
-
\ No newline at end of file
diff --git a/pages/sync/generic-storage.mdx b/pages/sync/generic-storage.mdx
new file mode 100644
index 0000000..60d15d5
--- /dev/null
+++ b/pages/sync/generic-storage.mdx
@@ -0,0 +1,67 @@
+# Generic Versioned Storage Sync
+
+---
+
+import { Callout } from 'nextra/components'
+
+
+
+
+
+Sometimes you need more control over how your tokens are stored, either to circumvent direct git solutions like Github, Gitlab, etc, to keep control within your infrastructure and not rely on third party storage, or to adopt more fine grained control regarding access and modification of tokens by your users, in this case, you can create your own storage endpoint and hook it into the Figma Tokens plugin.
+
+An example implementation of creating your storage endpoint can be found [here](https://github.com/SorsOps/figma-tokens-generic-storage-example). In this example we are using a SQLite DB to store the tokens on a local file, however you need only to support the data contract between the plugin.
+
+
+## Flows
+
+There are 3 types of flows available to this storage provider:
+
+1. Readonly
+
+If this is used, the storage provider acts similar to the URL provider, with the only difference the ability to set additional headers. All read requests will be sent via `GET` calls to the endpoint, and no writes will be conducted at all.
+
+2. Read/Write
+
+In this flow, write requests are done using `PUT` requests that are considered to be idempotent. During the initial setup, a `PUT` request will be sent with the current set of tokens.
+
+
+
+**Note:** If you only have a README (no token files) setup in your repo, you can use a forward slash **'/'** in the file path as a way of initiating your first commit to setup the repository via the plugin. You will then be able to push your newly created tokens.
+
+### Pushing your initial set of tokens
+
+The plugin will now ask you to push your currently setup tokens to the repository.
+
+Add a commit message, e.g. "Initial commit"
+
+
+If you're adding a repository that already contains tokens, the plugin will ask you if you want to pull the latest tokens.
+
+**NOTE:** This will overwrite any locally stored tokens, so make sure to back these up if you don't want to lose them.
+
+
+### Pushing or Pulling Changes
+
+Whenever you make a change in Tokens Studio for Figma, you have to manually hit the `Push to GitHub` to push your local changes to your repository. You have to enter a commit message with every push. You can also choose the branch you want to push your changes to. This way you could also try out new tokens without overwriting the current token set up you have.
+
+
+If you only want to pull the latest changes, hit `Pull from GitHub`. The plugin indicates when your local changes differ from the ones stored on the repository by displaying a blue dot.
+
+
+### How to use tokens stored in GitHub in development?
+We have have now moved over from using Token Transformer to using our Custom Tranforms for [Style-dictionary](/transforming/style-dictionary) to work with Design Tokens.
+
+
+
+### Getting your team on board
+
+Once you have set a storage provider on a document in the plugin, the ID and name of your bin will be stored within that document. However, the `Secret` field will be left blank for each team member as it requires them to add their own secret. This approach allows for future implementation of different permissions and granting certain users different levels of access as consumers or contributors.
+
+### Changing storage credentials
+
+You can switch between different stored token bins at any time. To do so, create multiple provider items and click "Apply" to assign a specific token set to the current document.
+
+
+### Updating tokens
+
+Whenever you make changes to a token, the remote storage will be automatically updated. There is currently no separate "Publish" process; changes are immediately reflected in the tokens.
+
+### Pulling changes
+
+On startup, the plugin will automatically fetch the latest remote tokens. However, if your team has made changes while the plugin was open, you can pull the newest changes by clicking the `Pull from JSONBin` button located at the bottom-left of the plugin.
+
+
+### Pausing sync
+
+By default, every token change triggers an update on your sync provider. However, you can pause this behavior by unchecking the `Update remote` option found in the bottom-right `setting-icon` menu of the plugin.
+
+
+### Read-only mode
+If you'd like some of your team members to only be able to Read tokens, not write, you can add JSONBin with the `URL Sync` option in the plugin. All you'll need to do is add the URL for the bin, such as `https://api.jsonbin.io/v3/b/1234878172571726252` and headers such as `{ "X-Master-Key":"YOUR_KEY", "X-Access-Key":"YOUR_ACCESS_KEY_", "X-Bin-Meta": false }`. The important part is X-Bin-Meta: false, which is required for JSONBin to return only the tokens and not any metadata they store.
+
+
diff --git a/pages/sync/jsonbin.pt-br.mdx b/pages/sync/jsonbin.pt-br.mdx
deleted file mode 100644
index 69077ce..0000000
--- a/pages/sync/jsonbin.pt-br.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-# JSONBin.io
-
-Para começar a habilitar o Sync para o seu arquivo, vá para a guia `Sync` no plugin. Escolha `JSONBin` para selecionar JSONBin como seu provedor de sincronização.
-
-Ao iniciar o recurso Sincronizar pela primeira vez, você não terá nenhuma credencial de provedor armazenada em seu dispositivo. Vá em frente e selecione `Add Credentials`.
-
-Para `name`, escolha o nome que desejar. Você pode alterar o nome mais tarde.
-
-Agora você precisa pegar suas credenciais do JSONBin. Para fazer isso, acesse JSONBin.io e registre uma conta.
-
-Uma vez logado, clique no seu avatar e selecione `API-Keys`. Lá você encontrará sua chave secreta (`secret key`). Copie e insira no campo `Secret` no Tokens Studio for Figma.
-
-Se você deseja criar um novo bin de sincronização, você pode deixar a parte ID em branco. O plugin irá criar um novo bin para você. Você também pode inserir um ID existente neste campo para vincular um compartimento existente.
-
-import Callout from 'nextra-theme-docs/callout'
-
-
+
+import { Callout } from 'nextra/components'
+
+
-
-import Callout from 'nextra-theme-docs/callout'
-
-
The table or spreadsheet view gives you powerful bulk-edit capabilities, such as editing the values of multiple tokens at the same time.
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
+
+#### Local storage
+By default, all tokens are stored on the document that you're working in. If you need to work in multiple documents, this option won't work as it means you would have to copy paste your tokens to the other document.
+
+#### [URL](/sync/url)
+Pulls tokens from a remote `.json` stored on your server. This is a read-only sync method.
+
+#### [JSONBin.io](/sync/jsonbin)
+You can use JSONBin.io by creating an account and syncing your tokens there. It's a free and easy way to sync your tokens, but they are however not version controlled by default.
+
+#### [GitHub](/sync/github)
+The recommended way as it hosts your code and design decisions in the same location. By connecting to a repository, you can pull and push tokens or even select a branch to push to. This allows you to explore design decisions before deploying them to a production environment. Additionally, we provide support for GitHub Enterprise for enhanced functionality and compatibility.
+
+#### [Gitlab](/sync/gitlab)
+Like GitHub, you can use GitLab to store your tokens on your repository.
+
+#### [Azure DevOps](/sync/ado)
+Allows you to store your tokens on ADO.
+
+#### [Supernova](/sync/supernova)
+Allows you to sync your tokens between Tokens Studio and Supernova.
+
+#### [Generic Versioned Storage](/sync/generic-storage)
+An extension off of the URL storage. This storage provider supports read/only, read/write and read/write/create flows. Additionally it can be extended with arbitrary headers on the requests should you need more fined grained support for your end-point.
+
+#### BitBucket (not yet)
+We're planning on integrating BitBucket as well, but have hit a roadblock with their API. If you'd like to support us in that effort, reach out on Slack in #feat-bitbucket-sync.
diff --git a/pages/sync/sync.pt-br.mdx b/pages/sync/sync.pt-br.mdx
deleted file mode 100644
index 848a79b..0000000
--- a/pages/sync/sync.pt-br.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-# Sincronizar (Sync)
-
-Como os tokens fazem mais sentido em um ambiente de equipe, algum tipo de sincronização é necessário para manter os valores atualizados enquanto a equipe está trabalhando em arquivos diferentes.
-
-### Sync options
-- Local storage (padrão)
-- JSONBin.io
-- URL
-- GitHub
-- GitLab (novo)
-
-
-
-#### Armazenamento Local (Local storage)
-Por padrão, todos os tokens são armazenados no documento em que você está trabalhando. Se precisar trabalhar em vários documentos, esta opção não funcionará, pois significa que você terá que copiar e colar seus tokens no outro documento.
-
-#### JSONBin.io
-Você pode usar JSONBin.io para criar uma conta e sincronizar seus tokens lá. É uma maneira fácil e gratuita de sincronizar seus tokens, embora eles não sejam tenham controle de versão por padrão.
-
-#### URL
-Extrai tokens de um .json remoto armazenado em seu servidor. Este é um método de sincronização somente de leitura.
-
-#### GitHub
-A maneira mais recomendada (vale para todos os repositórios em Git), pois permite que suas decisões de design vivam no mesmo lugar que seu código está. Conecte-se a um repositório, extraia e envie tokens ou escolha um branch para o qual deseja enviar o seu trabalho - o que permite explorar as decisões de design antes de colocá-los em produção.
-
-#### Gitlab
-A maneira mais recomendada (vale para todos os repositórios em Git), pois permite que suas decisões de design vivam no mesmo lugar que seu código está. Conecte-se a um repositório, extraia e envie tokens ou escolha um branch para o qual deseja enviar o seu trabalho - o que permite explorar as decisões de design antes de colocá-los em produção.
diff --git a/pages/sync/url.mdx b/pages/sync/url.mdx
new file mode 100644
index 0000000..3397849
--- /dev/null
+++ b/pages/sync/url.mdx
@@ -0,0 +1,25 @@
+import { Callout } from 'nextra/components'
+
+# URL Sync
+
+
+
+### Getting your team on board
+After setting a storage provider on a document, the ID and name of the bin will be stored within that document. The Headers field is intentionally left blank, as each team member will need to add their own headers.
+
+### Pulling changes
+On startup, the plugin will automatically fetch the latest remote tokens. However, if your team has made changes while the plugin was open, you can pull the newest updates by clicking the `Pull from URL` button located at the bottom-left. This way, you can ensure that you have the most up-to-date token information from the remote source and synchronize any changes that occurred while the plugin was running.
+
diff --git a/pages/sync/url.pt-br.mdx b/pages/sync/url.pt-br.mdx
deleted file mode 100644
index 0368196..0000000
--- a/pages/sync/url.pt-br.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-# Sincronizar por URL (URL Sync)
-
-
-
-Para começar a usar o Sync para o seu arquivo, vá para a guia `Sync` no plugin. Escolha `URL` para escolher um .json armazenado em seu servidor como seu provedor de sincronização.
-
-Ao iniciar o recurso *Sync* pela primeira vez, você não terá nenhuma credencial de provedor armazenada em seu dispositivo. Vá em frente e selecione `Add Credentials`.
-
-Para `name`, escolha o nome que desejar - você poderá alterá-lo mais tarde.
-
-Se o seu servidor requer algum tipo de autenticação, você pode armazenar seus *Headers* como um objeto JSON no campo de *Headers*. É importante que seu .json armazenado em seu servidor tenha `Access-Control-Allow-Origins` definido como `*`, peça a time de Desenvolvimento para ajudá-lo se você estiver travado ou [leia sobre isso](https: //gist.github.com/nixta/0b98d7975562bc31c4c9). A parte do URL é o URL completo que aponta para o seu .json
-
-### Modo de leitura (Read only mode)
-
-O modo de sincronização de URL é um modo somente leitura. Isso significa que você não pode fazer nenhuma alteração diretamente no plug-in, você terá que fazer no .json armazenado em seu servidor.
-
-Você pode encontrar um exemplo .json em [exemplo de JSON de tokens](https://raw.githubusercontent.com/tokens-studio/figma-plugin-example/main/tokens.json).
-
-### Trazendo sua equipe a bordo
-
-Depois de definir um provedor de armazenamento em um documento, armazenamos a ID e o nome do seu *bin* neste documento. O campo *Headers* é deixado em branco, então cada membro da equipe terá que adicionar os *Headers* por conta própria.
-
-### Enviando modificações (pull)
-
-O plugin irá buscar automaticamente os tokens remotos mais recentes na inicialização. De vez em quando, sua equipe pode ter feito alterações enquanto você estava com o plug-in aberto. Para obter as alterações mais recentes, clique no botão 'Pull from URL' no canto superior direito.
\ No newline at end of file
diff --git a/pages/themes/_meta.js b/pages/themes/_meta.js
new file mode 100644
index 0000000..b4cbf34
--- /dev/null
+++ b/pages/themes/_meta.js
@@ -0,0 +1,4 @@
+export default {
+ "token-sets": "Token Sets",
+ "themes-pro": "Multi-Dimensional Themes (Pro)"
+}
diff --git a/pages/themes/_meta.pt-br.json b/pages/themes/_meta.pt-br.json
deleted file mode 100644
index 0355902..0000000
--- a/pages/themes/_meta.pt-br.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "token-sets": "Token Sets",
- "themes-pro": "Temas avançados (Pro)"
-}
diff --git a/pages/themes/themes-pro.mdx b/pages/themes/themes-pro.mdx
new file mode 100644
index 0000000..85b2a66
--- /dev/null
+++ b/pages/themes/themes-pro.mdx
@@ -0,0 +1,82 @@
+# Multi-dimensional themes (Pro)
+
+Advanced themes have now become Multidimensional themes! Previously, when working with themes, you would have to save multiple themes for different overrides, which led to a lengthy list of themes to choose from.
+
+---
+
+import ReactPlayer from 'react-player'
+
+
+
+
+To create a new theme, click on the `New Theme` button. Assign a name to your theme and enable the token sets that you want to include in the theme. Finally, click on the `Save Theme` button. Additionally, you can designate a token set as a `Source`.
+
+Enter the name of the theme, enable the token sets you want to be included in the theme and click on `Save theme` button. You can also set a token set as a source.
+
+import { Callout } from 'nextra/components'
+
+
+
+## Managing Themes
+
+In the `Manage Themes`section, you can not only obtain an overview of all your themes but also access information about the tokens attached to styles. To do this, click on the arrow next to one of your themes. This action will open a modal window with two tabs located on the top-right: `Sets` and `Styles`, select the Styles tab. Within the styles tab, upon expanding the available sections, you will find a comprehensive overview of the tokens and styles that are linked to the selected theme.
+
+
+
+## Grouping Themes
+
+With Multi-dimensional themes, we now provide the ability to categorise your themes into groups. This allows you to generate a matrix of potential combinations involving color themes, platforms, brands, density, languages, and more. Multi-dimensional themes significantly alleviate the need to create an excessive number of individual themes.
+
+For example:
+- **Mode** - Light, Dark
+- **Brand A** - RedPlanet, YellowCab
+- **Contrast** - Default, High
+- **Language** - English, Japanese, German
+
+Having your sets clubbed under groups makes it more accessible to switch from a matrix of themes.
+
+
+
+Prior to the implementation of multidimensional themes, achieving all possible combinations required the creation of 24 themes, such as:
+1. RedPlanet-Light-Default-English
+2. RedPlanet-Light-Default-Japanese
+3. RedPlanet-Light-Default-German
+4. RedPlanet-Dark-Default-English
+5. RedPlanet-Dark-Default-Japanese
+6. RedPlanet-Dark-Default-German, and so on.
+
+With the introduction of multidimensional themes, this number has now been reduced to 9 themes.
+
+
+## Applying a theme
+
+To apply a particular theme, click on the Theme dropdown, and select one set from each of the groups that you want applied.
+
+
diff --git a/pages/themes/themes-pro.pt-br.mdx b/pages/themes/themes-pro.pt-br.mdx
deleted file mode 100644
index 37ffeb1..0000000
--- a/pages/themes/themes-pro.pt-br.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-# Themes-Pro
-
-If you are on a Pro plan, you have access to the `Theme` feature.
-
-Using this feature you can select any number of token sets and save it as a theme and apply any theme with a single click.
-
-## Creating a theme
-
-Select the `Theme` dropdown and click on `Manage Themes` option.
-
-
-
-
-You can create a new theme by clicking on `New theme` button.
-
-
-
-
-Enter the name of the theme, enable the token sets you want to be included in the theme and click on `Save theme` button. You can also set a token set as a source.
-
-
-
-
-
-## Applying a theme
-
-To apply a particular theme click on the `Theme` dropdown and select the theme you want to apply.
-
-
-
\ No newline at end of file
diff --git a/pages/themes/token-sets.mdx b/pages/themes/token-sets.mdx
new file mode 100644
index 0000000..858302d
--- /dev/null
+++ b/pages/themes/token-sets.mdx
@@ -0,0 +1,40 @@
+# Token Sets
+
+You can split your tokens up into multiple sets, or themes.
+
+Splitting tokens up has many benefits:
+- Allow you to split up options and decisions
+- Gives you the ability to semantically seperate tokens
+- Different sets can be exposed by activating only what you need
+
+---
+
+
+
+##### Creating sets
+You can create a new set by clicking the '+' at the bottom of your existing sets. Enter a unique name.
+
+
+
+#### Switching to a set
+Click on the token set (not the checkbox) to switch editor context to this new set.
+
+#### Renaming or deleting a set
+Right-click a set to display 'Rename' and 'Delete' options.
+
+#### Treat as source
+Right-click a set to enable 'Treat as source'. When a token set is treated as a source, these tokens will not be exported as styles but only used as a reference. You recognise a token set is marked as source by the dot inside the checkbox.
+
+
+
+#### Activating (checking) a set
+By ticking the checkbox you activate this set, meaning these tokens will get exposed to Figma. If you have multiple sets (e.g. a light and a dark theme) you can overwrite decisions that may have been defined in another set.
+
+#### Changing order of sets
+You can drag sets around to define their order. All active token sets get exposed and merged into one big token set, if some tokens have the exact same name and path, the latter one wins (e.g. if colors.foreground exists in both a light and a dark theme, the one thats visible later in the set list wins).
+
+#### Creating a folder structure of sets (Pro)
+You first need to enable [Multi File Sync](/sync/multi-file).
+When the Multi File Sync is enabled, you can create a folder structure from the plugin. Simply rename your token sets to have a folder path, eg folder/set-1 , folder/set-2.
+
+
diff --git a/pages/themes/token-sets.pt-br.mdx b/pages/themes/token-sets.pt-br.mdx
deleted file mode 100644
index a4a82d2..0000000
--- a/pages/themes/token-sets.pt-br.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
-# Token Sets (Temas)
-
-Agora você pode dividir seus tokens em vários conjuntos ou temas.
-
-Dividir tokens tem muitos benefícios:
-- Permitem que você divida opções e decisões
-- Oferece a capacidade de separar semanticamente tokens
-- Conjuntos diferentes podem ser expostos ativando apenas o que você precisa
-
----
-
-
-
-##### Criando sets
-Você pode criar um novo conjunto clicando no `+` próximo aos conjuntos existentes. Insira um nome único.
-
-
-
-#### Mudando para um conjunto (set)
-Clique no conjunto de tokens (não na caixa de seleção) para mudar o contexto do editor para este novo conjunto.
-
-#### Renomeando ou excluindo um conjunto (set)
-Clique com o botão direito em um conjunto para exibir as opções de renomear e excluir.
-
-#### Tratar como fonte (Treat as source)
-Clique com o botão direito do mouse em um conjunto para ativar 'Treat as source'. Quando um conjunto de tokens é tratado como fonte, esses tokens não serão exportados como estilos, mas usados apenas como referência. Você reconhece que um conjunto de tokens está marcado como origem pelo ponto dentro da caixa de seleção (checkbox).
-
-
-
-#### Ativando (verificando) um conjunto (set)
-Ao marcar a caixa de seleção, você ativa este conjunto, o que significa que esses tokens serão expostos ao Figma. Se você tiver vários conjuntos (por exemplo, um tema claro e um tema escuro), poderá substituir as decisões que podem ter sido definidas em outro conjunto.
-
-#### Alteração da ordem dos conjuntos
-Você pode arrastar conjuntos para definir sua ordem. Todos os conjuntos de tokens ativos são expostos e mesclados em um grande conjunto de tokens, se alguns tokens tiverem exatamente o mesmo nome e caminho, o último ganha (por exemplo, se `colors.foreground` existe em um tema claro e escuro, aquele que é visível mais tarde nas vitórias do `set list`)
-
-#### Criando uma estrutura de pastas de conjuntos (Pro)
-Primeiro você precisa habilitar a Multi File Sync.
-Quando o Multi File Sync está ativado, você pode criar uma estrutura de pastas a partir do plug-in. Basta renomear seus conjuntos de tokens para ter um caminho de pasta, por exemplo, `folder/set-1` , `folder/set-2`.
-
-
\ No newline at end of file
diff --git a/pages/tokens/_meta.js b/pages/tokens/_meta.js
new file mode 100644
index 0000000..55f6f6a
--- /dev/null
+++ b/pages/tokens/_meta.js
@@ -0,0 +1,11 @@
+export default {
+ "creating-tokens": "Creating tokens",
+ "applying-tokens": "Applying tokens",
+ "aliases": "Aliases",
+ "using-math": "Using math",
+ "color-modifiers": "Color modifiers (Pro)",
+ "documentation-tokens": "Documentation tokens",
+ "token-types": "Token types",
+ "json-schema": "JSON schema",
+ "settings": "Settings"
+}
diff --git a/pages/tokens/_meta.pt-br.json b/pages/tokens/_meta.pt-br.json
deleted file mode 100644
index 8901dfb..0000000
--- a/pages/tokens/_meta.pt-br.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "creating-tokens": "Criação de tokens",
- "applying-tokens": "Aplicando tokens",
- "aliases": "Apelidos (Aliases)",
- "using-math": "Usando matemática",
- "documentation-tokens": "Tokens de documentação",
- "token-types": "Token types",
- "json-schema": "JSON schema"
-}
diff --git a/pages/tokens/aliases.mdx b/pages/tokens/aliases.mdx
new file mode 100644
index 0000000..d6728e6
--- /dev/null
+++ b/pages/tokens/aliases.mdx
@@ -0,0 +1,31 @@
+import { Callout } from 'nextra/components'
+
+# Aliases
+
+One of the advantages of Tokens Studio for Figma is its ability to utilize references to other tokens when defining values for your tokens. This allows for a highly efficient and consistent design system. For example, your brand color can be established as a reference to `colors.red.500`, while a background token can derive its value from `colors.black`, and a foreground token can inherit its value from `colors.white` (all referenced from core). This feature enhances flexibility and maintains a cohesive visual language throughout your design system.
+
+
+To use aliases in tokens, we use the following notation: `{spacing.sm}`. You can also select any available aliases while creating a token by typing `{` and a part of the alias name in the field, or by selecting available aliases from the dropdown.
+
+By using this notation, you instruct the plugin to locate a token named `spacing.sm` and use its corresponding value. The benefit of this approach is that any changes then made to the `spacing.sm` token will automatically propagate to all tokens that reference it.
+
+
+
+### Control where to apply changes
+You can also control which parts of your designs are updated by utilising the `Apply selector` located at the bottom right of the plugin. You have the following options to choose from:
+- Apply to selection (updates only the currently selected elements)
+- Apply to page (updates the current/active page)
+- Apply to document (updates all pages, which can be slower)
+
+Additionally, we provide you with more control over the updates made after changing a token. In the `Setting icon` next to the apply selector, unchecking `Update on change` for example will require you to manually click the `Apply to` button in order to update the changes on your selection, page or document.
+
+
diff --git a/pages/tokens/applying-tokens.pt-br.md b/pages/tokens/applying-tokens.pt-br.md
deleted file mode 100644
index bfb66c4..0000000
--- a/pages/tokens/applying-tokens.pt-br.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Aplicando tokens
-
-Existem duas maneiras de aplicar tokens à sua seleção:
-
-### Comportamento padrão (botão esquerdo)
-Quando você clica com o botão esquerdo em um token, ele é colocado em sua seleção (várias camadas selecionadas são possíveis!). Para certos tokens, determinamos os padrões - como em `Colors`, onde assumimos que você deseja aplicar `Fill`.
-
-### Especificando o que aplicar (clique com o botão direito)
-Você pode clicar com o botão direito do mouse nos tokens para especificar qual propriedade deve ser definida, como em `Spacing` as propriedades `Horizontal Spacing`, `Vertical Spacing` ou `Gap` individualmente.
-
-### Control where to apply changes
-Você pode controlar quais partes do seu design são atualizadas utilizando o seletor Aplicar no canto inferior esquerdo do plugin.
-
-Você pode escolher entre:
-- Aplicar à página (a página atualmente selecionada será atualizada)
-- Aplicar ao documento (todas as páginas são atualizadas, possivelmente lento)
-- Aplicar à seleção (apenas os nós selecionados atualmente serão atualizados)
-
-Além disso, oferecemos a você mais controle sobre o que acontece depois que você altera um token. Ao definir `Update on change` para false, o plugin irá requerer que você pressione manualmente o botão `Update` para enviar alterações para sua página / documento / seleção.
\ No newline at end of file
diff --git a/pages/tokens/color-modifiers.mdx b/pages/tokens/color-modifiers.mdx
new file mode 100644
index 0000000..2be2bfd
--- /dev/null
+++ b/pages/tokens/color-modifiers.mdx
@@ -0,0 +1,67 @@
+import { Callout } from 'nextra/components'
+
+# Color Modifiers (Pro)
+As a Pro user, you can manipulate colors to create slight variations of a specific base color. You can currently pick from the following opertaions: lighten, darken, mix and alpha. Additionally, you can also pick from the following color-spaces: lch, srgb, p3 and hsl.
+
+The color modifier can for example be used to create a hover state that is a bit brighter, a pressed state which is a bit darker or a color ramp from the base color. By leveraging these modifiers, you can introduce subtle variations, indicating states, or creating cohesive color schemes throughout your design.
+
+
+
+
+
+Choose the type of operation (lighten, darken, mix or alpha) and the color space (lcc, srgb, p3 or hsl). Next, you can enter an amount between 0 and 1, 0 being the base color 1 being the value of the selected opreation.
+
+## Available modifiers
+
+
+
+### Darken
+Using the darken operation means to darken the base color closer to the darkest shade in relation to the amount. So, the amount 0.1 will mean the base color gets darker by 10%, and a value of 1 means you get pure black.
+
+```
+0 amount: no change in darkness
+1 amount: black
+```
+
+
+### Mix
+To mix a color with another color, you can use the mix operation. The amount 0 means = the original base color that is used, and 1 = the color that it is being mixed with. An amount of 0.3 means a 30-70% split between the two values.
+
+```
+0 amount: base color
+1 amount: mix color
+```
+
+
+### Alpha
+To transparentize colors, you can use the alpha operation which takes the base color and makes it transparent according to the amount. 0 = transparent, 1 = fully opaque. An amount 0.2 outputs an opacity of 20%.
+
+```
+0 amount: fully transparent
+1 amount: fully opaque
+```
+
+
+
+
+
+
diff --git a/pages/tokens/color-modifiers.pt-br.mdx b/pages/tokens/color-modifiers.pt-br.mdx
deleted file mode 100644
index 026dd48..0000000
--- a/pages/tokens/color-modifiers.pt-br.mdx
+++ /dev/null
@@ -1,59 +0,0 @@
-import Callout from 'nextra-theme-docs/callout'
-
-# Color Modifiers (Pro)
-As a Pro user you are now able to manipulate colors to create slight variations of a specific base color. Currently there are four modifiers available: lighten, darken, mix, alpha.
-
-The color modifier can for example be used to create a hover state that is a bit brighter, a pressed state which is a bit darker or a color ramp from the base color.
-
-## How to use
-Create a base color and add a modifier
-
-
-
-Choose the type of operation (lighten, darken, mix or alpha) and the color space (lcc, srgb, p3 or hsl)
-Next, choose the amount for the modifier (this is an amount between 0 and 1).
-
-## Available modifiers
-### Lighten
-When we lighten we take the base color and increase lightness by a percentage that equals the amount, so a 0.1 amount will mean the color gets 10% lighter. A value of 1 means you’re getting a white, so it’s always in relation to the base color to white.
-
-0 amount: no change in lightness
-1 amount: white
-
-
-
-### Darken
-Applying a darken modifier means we’re darkening the current color closer to the darkest shade in relation to the amount. So a 0.1 amount will mean the color gets 10% darker, an amount of 1 means pure black.
-
-0 amount: no change in darkness
-1 amount: black
-
-
-
-### Mix
-If you want to mix a color with another color you can use the mix modifier. The amount means: 0 = the original base color is used. 1 = the color to be mixed with is used. A value of 0.5 means a 50% split between those values.
-
-0 amount: base color
-1 amount: mix color
-
-
-
-### Alpha
-To transparentize colors you can use the alpha modifier, which takes the base color and makes it transparent according to the amount. 0 = transparent, 1 = fully opaque.
-
-0 amount: fully transparent
-1 amount: fully opaque
-
-
-
-
+
+### Editing tokens
+To change the value of an existing token, right click the token you wish to edit and select `Edit Token`. You can also change the name of the token. Doing so will then display a modal asking whether or not you would like to remap all your tokens using colors.blue to colors.blue.500. You can then select the type of remapping method: selection, page or document.
+
+
+### Duplicating tokens
+To duplicate a token, right click the token you wish to duplicate and select `Duplicate Token`. In addition to being able to duplicate a token, you can also select the set in which you want the token to be duplicated into.
+
+
+### Token groups
+As having a lot of tokens can become quite messy, you can use dot-notation in the token names to create nesting. For instance, you could have a token named "colors.button.background.primary”. This nesting approach helps keep your tokens structured and avoids clutter.
+
+You can also remove token groups by right-clicking them and selecting `Delete` which will remove all tokens under that group.
+
+
+
diff --git a/pages/tokens/creating-tokens.pt-br.md b/pages/tokens/creating-tokens.pt-br.md
deleted file mode 100644
index 5914c3e..0000000
--- a/pages/tokens/creating-tokens.pt-br.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# Criação de tokens
-
-Criar um novo token por meio da UI é um processo simples. Como exemplo, crie um novo token no grupo Fill clicando no ícone `+` no grupo `Fill`.
-
-No modal que aparece, dê um nome ao seu token, por exemplo `blue` com um valor de `#0000FF`, salve seu progresso clicando em `Create`.
-
-### Editando tokens
-Para alterar o valor de um token existente, clique com o botão direito no token que deseja editar e selecione `Edit Token`.
-
-Você também pode alterar o nome do token, o que atualizará automaticamente todas as referências a este token.
-
-### Grupos de token
-Como gerar muitos tokens pode se tornar bastante confuso, você pode agrupar seus tokens adicionando-os a um grupo de tokens.
-
-#### Crie um novo grupo de tokens
-Ao adicionar um novo token, você pode simplesmente escrever seus tokens em nomes separados por pontos. Nomear seu novo token `primary.500` irá adicionar este novo token ao grupo `primary` e com um nome de `500`.
-
-Você pode remover grupos de tokens clicando com o botão direito neles e selecionando `Delete`.
diff --git a/pages/tokens/documentation-tokens.mdx b/pages/tokens/documentation-tokens.mdx
new file mode 100644
index 0000000..68f4ef2
--- /dev/null
+++ b/pages/tokens/documentation-tokens.mdx
@@ -0,0 +1,28 @@
+# Documentation tokens
+
+To make it easier for you to create a living token documentation, version 50 introduced documentation tokens. With documentation tokens, you are able to create a reference sheet that is linked to your tokens and will update whenever you update your tokens, such as the one in this example:
+
+
+
+### How do I get my own token sheet?
+
+1. Select a text layer
+2. Right click the token you want to reference
+3. Select documentation token choices: Name, raw value, value (with all aliases resolved) and description.
+4. Whenever you change the value of a token (or it's description) the text content of this layer will update.
+
+
+
+---
+
+import ReactPlayer from 'react-player'
+
+
+
+
+## Prefix styles with active theme name (Pro)
+If you have set up themes and want your styles to be organized under a folder with the theme name, you can enable this setting. By doing so, a token named `bg.default` will be created as `Light/bg/default` for the Light theme and `Dark/bg/default` for the Dark theme.
+
+
+## Base font size
+By default, we consider `1rem` as equivalent to `16px` when using rem units. However, there might be instances where you want this value to be platform or screen-specific. To facilitate this flexibility, we provide an option to modify the rem value. You can adjust the `Base font-size` setting to a different value, such as 24 for example.
+
+
+Additionally, you can make this value dynamic and have it defined differently between token sets. For example, you can create a token called `scales.fontsize` with a value of 16px in the fontsize type and reference it in the `Base font-size`. Then, you can have the same token defined in a different set with a value of 24px.
+
+
+## Debugging feature
+Tthe `debugging feature` eseentially allow us to receive a record of telemetry data for bug fixing and performance. This feature is unchecked by default and leaving it so will send no data to the team. By checking the feature, you will be provided with a `Session ID` that you need to save for later. Proceed to then carry out the steps that for instance caused the plugin to crash. An anonymized report is then sent to the team for analysis. You can then reach out to one of the team members at Token Studio and share the saved ID, who will then look into the plugin crash reports.
+
+
+
diff --git a/pages/tokens/token-types.mdx b/pages/tokens/token-types.mdx
new file mode 100644
index 0000000..5e5d06a
--- /dev/null
+++ b/pages/tokens/token-types.mdx
@@ -0,0 +1,72 @@
+# Token types
+
+Tokens Studio for Figma uses a `type` property on each token to decide how to deal with each token. Token types can be set on individual tokens, or on a token group level. You can define your own types, but the plugin won't be able to apply them correctly.
+
+### Types at a group level
+
+If you'd rather define types not on every individual token but on a higher level, you can do that as well.
+
+```
+{
+ "colors": {
+ "type": "color",
+ "red": {
+ value: '#ff0000',
+ },
+ "blue": {
+ value: '#0000ff',
+ },
+ }
+}
+```
+
+The plugin will treat any token as a color token then, except if there's a `type` property set on the token itself.
+
+### Color tokens
+
+Color tokens can be defined like this:
+
+```
+{
+ "colors": {
+ "red": {
+ type: 'color',
+ value: '#ff0000',
+ },
+ "blue": {
+ type: 'color',
+ value: '#0000ff',
+ },
+ }
+}
+```
+
+### Size tokens
+
+Size tokens can be defined like this:
+
+```
+{
+ "sizing": {
+ "large": {
+ type: 'sizing',
+ value: '12px',
+ },
+ }
+}
+```
+
+### Space tokens
+
+Space tokens can be defined like this:
+
+```
+{
+ "spacing": {
+ "large": {
+ type: 'spacing',
+ value: '1rem',
+ },
+ }
+}
+```
diff --git a/pages/tokens/token-types.pt-br.mdx b/pages/tokens/token-types.pt-br.mdx
deleted file mode 100644
index 47c8351..0000000
--- a/pages/tokens/token-types.pt-br.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-# Tipos de Tokens (types)
-
-Tokens Studio for Figma usa uma propriedade `type` em cada token para decidir como lidar com cada token. Os tipos de token podem ser definidos em tokens individuais ou em um nível de grupo de tokens. Você pode definir seus próprios tipos, mas o plugin não poderá aplicá-los corretamente.
-
-### Tipos em nível de grupo
-
-Se você preferir definir tipos não em cada token individual, mas em um nível mais alto, também poderá fazer isso.
-
-```
-{
- "colors": {
- "type": "color",
- "red": {
- value: '#ff0000',
- },
- "blue": {
- value: '#0000ff',
- },
- }
-}
-```
-
-O plug-in tratará qualquer token como um token de cor, exceto se houver uma propriedade `type` definida no próprio token.
-
-### Tokens de cor
-
-Tokens de cor podem ser definidos assim:
-
-```
-{
- "colors": {
- "red": {
- type: 'color',
- value: '#ff0000',
- },
- "blue": {
- type: 'color',
- value: '#0000ff',
- },
- }
-}
-```
-
-### Fichas de tamanho
-
-Os tokens de tamanho podem ser definidos assim:
-
-```
-{
- "sizing": {
- "large": {
- type: 'sizing',
- value: '12px',
- },
- }
-}
-```
-
-### Tokens de espaço
-
-Os tokens de espaço podem ser definidos assim:
-
-```
-{
- "spacing": {
- "large": {
- type: 'spacing',
- value: '1rem',
- },
- }
-}
-```
diff --git a/pages/tokens/using-math.mdx b/pages/tokens/using-math.mdx
new file mode 100644
index 0000000..2790036
--- /dev/null
+++ b/pages/tokens/using-math.mdx
@@ -0,0 +1,14 @@
+# Using Math
+
+A lot of times it may make sense to build your tokens with a scale in mind, such as a type scale or a spacing scale. What that means, is that a value uses another value, but does calculations with it.
+
+For example, you may want your `spacing.sm` token reference the `spacing.xs` token, but multiply its value by 2. To do that, you can write the following as the token's value: `{spacing.xs} * 2` (note the space between token and value)
+
+You can also multiply with another token: `{spacing.xs} * {spacing.scale}`
+
+where `spacing.scale` would be a token who's value could be for example 2.
+
+Other use cases where this is helpful could be typography with font sizes referencing the previous token and multiply that with a type scale of e.g. 1.25.
+
+### Adding units
+The plugin cannot calculate if one of your tokens had the unit included (e.g. `spacing.sm = 2rem`). In that case you can either decide to remove the unit or extract the operation to its own token, and then append the unit after that new alias token (e.g. `spacing.sm = {spacing.xs} * {spacing.scale}` and then `{spacing.sm}rem`). However, we recommend to use unit-less tokens and instead rely on transformers such as Style Dictionary to later add units to your tokens. The plugin itself will consider any unit-less token as px-based.
diff --git a/pages/tokens/using-math.pt-br.md b/pages/tokens/using-math.pt-br.md
deleted file mode 100644
index e715ac1..0000000
--- a/pages/tokens/using-math.pt-br.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Usando matemática
-
-Muitas vezes, pode fazer sentido construir seus tokens com uma escala em mente, como uma escala de tipografia ou uma escala de espaçamento. O que isso significa é que um valor usa outro valore e faz cálculos com ele.
-
-Por exemplo, você pode querer que seu token `spacing.sm` faça referência ao token `spacing.xs`, porém multiplique seu valor por 2. Para fazer isso, você pode escrever o seguinte como o valor do token: `$spacing.xs * 2` (observe o espaço entre o token e o valor).
-
-Você também pode multiplicar por outro token: `$spacing.xs * $spacing.scale`!
-
-Onde `spacing.scale` seria um token cujo valor poderia ser, por exemplo, 2.
-
-Outros casos de uso em que isso é útil podem ser tipografia com tamanhos de fonte referenciando o token anterior e multiplicar isso com uma escala de tipo de, por exemplo, 1,25.
-
-### Adding units
-O plugin não pode calcular se um dos tokens tinha a unidade incluída (por exemplo, `spacing.sm = 2rem`).
-
-Nesse caso, você pode decidir remover a unidade ou anexá-la após a operação (por exemplo, `{spacing.xs} * {spacing.scale}rem`).
\ No newline at end of file
diff --git a/pages/transforming/_meta.en.json b/pages/transforming/_meta.js
similarity index 70%
rename from pages/transforming/_meta.en.json
rename to pages/transforming/_meta.js
index 9951e9c..169837e 100644
--- a/pages/transforming/_meta.en.json
+++ b/pages/transforming/_meta.js
@@ -1,4 +1,4 @@
-{
+export default {
"style-dictionary": "Style dictionary"
- }
+}
\ No newline at end of file
diff --git a/pages/transforming/style-dictionary.pt-br.mdx b/pages/transforming/style-dictionary.mdx
similarity index 91%
rename from pages/transforming/style-dictionary.pt-br.mdx
rename to pages/transforming/style-dictionary.mdx
index 2dca352..a30ac53 100644
--- a/pages/transforming/style-dictionary.pt-br.mdx
+++ b/pages/transforming/style-dictionary.mdx
@@ -20,10 +20,10 @@ Once Style Dictionary is installed, we can start transforming our design tokens.
## Configuration
-We provide official transforms in the form of a package called [@tokens-studio/sd-transforms](https://www.npmjs.com/package/@tokens-studio/sd-transforms). You can customize these transforms or create your own to fit your needs. More information ca be found on npm.
+We provide official transforms in the form of a package called [@tokens-studio/sd-transforms](https://www.npmjs.com/package/@tokens-studio/sd-transforms). You can customize these transforms or create your own to fit your needs. More information can be found on npm.
## Style Dictionary Configurator
[Style Dictionary Configurator](https://configurator.tokens.studio/) is a web-based tool that allows you to transform your design tokens directly in your browser. It uses Style Dictionary under the hood and can be a convenient way to experiment with Style Dictionary without installing it on your computer.
-If you have any feedback or questions, you can find the Style Dictionary team on Slack in #style-dictionary-configurator.
\ No newline at end of file
+If you have any feedback or questions, you can find the Style Dictionary team on Slack in #style-dictionary-configurator.
diff --git a/pages/troubleshooting/_meta.en.json b/pages/troubleshooting/_meta.js
similarity index 69%
rename from pages/troubleshooting/_meta.en.json
rename to pages/troubleshooting/_meta.js
index deb8ab5..41c4557 100644
--- a/pages/troubleshooting/_meta.en.json
+++ b/pages/troubleshooting/_meta.js
@@ -1,3 +1,3 @@
-{
+export default {
"reset-tokens": "Resetting tokens"
}
diff --git a/pages/troubleshooting/reset-tokens.en.mdx b/pages/troubleshooting/reset-tokens.mdx
similarity index 86%
rename from pages/troubleshooting/reset-tokens.en.mdx
rename to pages/troubleshooting/reset-tokens.mdx
index 9e298f3..0f47f97 100644
--- a/pages/troubleshooting/reset-tokens.en.mdx
+++ b/pages/troubleshooting/reset-tokens.mdx
@@ -1,7 +1,7 @@
# Reset your tokens
If you run into any problems with your tokens and have problems opening the plugin, you can always reset your tokens.
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
- Tokens Studio for Figma
-
- Docs
-
-
- ),
- head: ({ title, meta }) => {
- const { route } = useRouter();
-
- const lastDot = route.lastIndexOf('.')
- const path = route === '/index' ? '/' : route.slice(0, lastDot)
- const ogImage = `https://img.websnap.app/?url=https://docs.tokens.studio${path}&token=D5rpX7VfD3dACoyb&viewport_width=1200&viewport_height=630`;
- const ogTitle = title ? `${title} – Tokens Studio for Figma Docs` : 'Tokens Studio for Figma Docs';
- return (
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )
- },
- i18n: [
- { locale: 'en', text: 'English' },
- { locale: 'pt-br', text: 'Português (Brasil)' }
- ],
- search: true,
- prevLinks: true,
- nextLinks: true,
- floatTOC: false,
- defaultMenuCollapsed: true,
- footer: true,
- footerEditOnGitHubLink: true,
- footerText: (
-
- )
-}
diff --git a/theme.config.tsx b/theme.config.tsx
new file mode 100644
index 0000000..ba9ce7f
--- /dev/null
+++ b/theme.config.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { DocsThemeConfig } from 'nextra-theme-docs'
+
+
+// This is the branch that the docs are on - this is used to link to the correct file in the GitHub repo
+// This should be changed to main when we're ready to merge the docs - we could also use a PR branch
+const editorBranch = 'feat/obsidian-powered-docs'
+
+const config: DocsThemeConfig = {
+ logo: Tokens Studio for Figma,
+ project: {
+ link: 'https://github.com/tokens-studio/figma-plugin',
+ },
+ docsRepositoryBase: `https://github.com/tokens-studio/plugin-docs/tree/${editorBranch}`,
+ editLink: {
+ component: ({ children, className, filePath }) => React.createElement('a', {
+ className,
+ href: `${config.docsRepositoryBase}/${filePath.replace('pages/', 'obsidian_vault/')}`,
+ }, children),
+ },
+ footer: {
+ content: 'Tokens Studio for Figma',
+ },
+ feedback: {
+ content: 'Give us feedback!',
+ useLink: () => "https://feedback.tokens.studio"
+ },
+ // Timestamps are kinda useless here - because they're generated at build time, not at edit time
+ gitTimestamp: false
+ // i18n: [
+ // { locale: 'en', name: 'English' },
+ // { locale: 'pt-br', name: 'Português' },
+ // ]
+
+
+}
+
+export default config
+
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..f519d6c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "downlevelIteration": true,
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
+ }
+
\ No newline at end of file
diff --git a/untitled.js b/untitled.js
new file mode 100644
index 0000000..a165a53
--- /dev/null
+++ b/untitled.js
@@ -0,0 +1,139 @@
+// src/next.config.ts
+import path from "path";
+import withVideos from "next-videos";
+import nextra from "nextra";
+import remarkMdxDisableExplicitJsx from "remark-mdx-disable-explicit-jsx";
+import nextBundleAnalyzer from "@next/bundle-analyzer";
+
+// src/underscore-redirects.ts
+import { writeFile } from "fs/promises";
+import { join } from "path";
+var RunPromiseWebpackPlugin = class {
+ constructor(asyncHook) {
+ this.asyncHook = asyncHook;
+ }
+ apply(compiler) {
+ compiler.hooks.beforeCompile.tapPromise("RunPromiseWebpackPlugin", this.asyncHook);
+ }
+};
+var isWarningPrinted = false;
+function applyUnderscoreRedirects(config, meta) {
+ config.plugins.push(
+ new RunPromiseWebpackPlugin(async () => {
+ const outDir = meta.dir;
+ const outFile = join(outDir, "./public/_redirects");
+ try {
+ const redirects = meta.config.redirects ? Array.isArray(meta.config.redirects) ? meta.config.redirects : await meta.config.redirects() : [];
+ if (redirects.length === 0) {
+ if (!isWarningPrinted) {
+ console.warn(
+ '[@theguild/components] No redirects defined, no "_redirect" file is created!'
+ );
+ isWarningPrinted = true;
+ }
+ return;
+ }
+ const redirectsTxt = redirects.map((r) => `${r.source} ${r.destination} ${r.permanent ? 301 : 302}`).join("\n");
+ await writeFile(outFile, redirectsTxt);
+ } catch (error) {
+ throw new Error(
+ `Failed to generate "_redirects" file during build: ${error.message}`
+ );
+ }
+ })
+ );
+}
+
+// src/next.config.ts
+var defaultRemarkPlugins = [
+ [
+ // replace , , 
- 
-