Quais formatos de exportação são suportados?

A ferramenta suporta variáveis CSS (:root), configurações do Tailwind (theme.extend), tokens.json do Style Dictionary e variáveis SCSS.

Posso converter cores em formato RGB ou nomes para Hexadecimal?

Sim, basta selecionar a opção de normalização de cor para converter automaticamente formatos nomeados e RGB/RGBA para Hexadecimal.

O que acontece com funções de formatação ou booleanos do tema?

Valores booleanos, funções formatadoras e propriedades de nível Z (z-level) são filtrados automaticamente, extraindo apenas tokens de design válidos.

É necessário instalar alguma dependência para usar o extrator?

Não, a extração é feita de forma totalmente offline e determinística diretamente no seu navegador.

Como funciona o prefixo de token?

O prefixo adiciona um identificador no início de cada variável gerada (por exemplo, transformando um token de cor em `--prefixo-color-1`), facilitando a organização no seu código.

Elysia Tools

Navegação

Design

Extrator de tokens de tema ECharts

Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.

Detalhes

O que esta ferramenta ajuda você a fazer

Uma ponte dos temas de visualização do ECharts para o seu design system:

Cole um JSON de tema ECharts — o objeto que você registra e passa a echarts.init(dom, themeName). Pode ser a forma compacta (só um array "color") ou um tema completo com series/axis/textStyle.
O extrator percorre cada valor folha e o marca: cores (#hex, rgb()/rgba(), nomes), números de espaçamento/tamanho, strings de tamanho de fonte (12px, 1.2rem) e strings simples. Booleanos, formatadores e z-level são filtrados.
Normalize opcionalmente as cores: converta cores nomeadas e rgb()/rgba() para hex, para que cada token de cor seja uniforme.
Escolha o formato de saída e um prefixo de token:

Variáveis CSS → um bloco :root { --prefix-…: …; } para colar numa folha de estilo.
Tailwind → um objeto theme.extend { colors, spacing, fontSize } para tailwind.config.js.
Style Dictionary → um tokens.json aninhado (cada token traz value + type) para o pipeline Style Dictionary.
SCSS → variáveis $prefix_…: …;.

A tabela de tokens mostra cada token extraído com seu tipo, uma amostra de cor quando aplicável e o caminho-fonte no tema, para auditar a extração antes de confiar.

Offline e determinístico: percurso JSON puro, sem dependência externa.

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Execuções de exemplo preparadas

Clique em um exemplo para preencher o formulário automaticamente. Arquivos ainda precisam ser enviados.

2 exemplos

Tema padrão ECharts → variáveis CSS

Um tema pequeno com paleta de série de 3 cores, fundo e estilo de texto, exportado como propriedades personalizadas CSS :root com cores normalizadas em hex e prefixo "chart".

<div class="ec-wrap">…8 tokens: 5 colors (chart-color-1…3, chart-background-color, chart-text-style-color) + 1 number (chart-text-style-font-size)… :root { --chart-color-1: #5470c6; … }…</div>

Tema rico → Tailwind theme.extend

Um tema mais completo (paleta de 5 cores, tamanhos de fonte, espaçamento) exportado como bloco theme.extend pronto para colar em tailwind.config.js.

<div class="ec-wrap">…colors grouped under theme.extend.colors, font sizes under theme.extend.fontSize, ready to paste into tailwind.config.js…</div>

Entradas

Preencha os campos necessários e execute a ferramenta.

4 opções

ConteúdoCole ou digite os valores principais.2

JSON do tema EChartstextareaObrigatórioPrefixo do tokentextOpcional

ConfiguraçõesAjuste formatos, intervalos, números e modos.2

Formato de saídaselectOpcionalNormalização de corselectOpcional

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

{ "themeJson": "{\n \"color\": [\"#5470c6\", \"#91cc75\", \"#fac858\"],\n \"backgroundColor\": \"rgb(255, 255, 255)\",\n \"textStyle\": { \"fontSize\": 12, \"color\": \"#333333\" }\n}", "format": "css", "prefix": "chart", "colorMode": "hex" }

Extrator de tokens de tema ECharts

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Conversão de Tema Padrão para Variáveis CSS

2. Integração de Tema Rico com Tailwind CSS

Perguntas frequentes

Exemplos JWT

Amostras JSON de Terraform Plan

Exemplos de Rastreamento Distribuído

Exemplos PDF

De paleta de imagem para design tokens

JSON Key Extractor

Gerador de Gráfico de Intervalo

Removedor de Caracteres BOM

Ferramentas de intercambio JSON e traducao de formatos

Ferramentas de conversão de caixa, codificação e normalização de texto

Ferramentas de inspecao, diff e transformacao JSON

Ferramentas de Text