🎨 RD Pulso Icon & Token Preview - VS Code Extension
Extensão para Visual Studio Code que permite visualizar rapidamente os ícones RD Pulso e os tokens de Design System (cores, espaçamentos, fontes, etc) ao passar o mouse sobre o código.
✅ Funcionalidades
🖼️ Preview de Ícones RD Pulso
- Hover em qualquer
symbol="rdicon-nome" usado nos componentes.
- Exibe um link clicável para abrir um painel com preview visual do ícone na fonte oficial RD Sans Symbols.
Exemplo:
<Icon symbol="rdicon-edit" />
No hover:
✅ Aparece link: "🔍 Visualizar ícone rdicon-edit"
✅ Ao clicar: Abre preview com o ícone renderizado.
🎨 Preview de Tokens RD Pulso (Cores, Fontes, Spacing, etc)
- Suporte para tokens usados dentro de
theme.get(), theme.getAsNumber(), e até tokens soltos em strings.
- Exibe o valor real do token (ex: cor RGBA, número, nome de fonte).
Exemplos:
Tokens de Cor:
color: theme.get("v2.colorTextNeutralDefault")
Hover:
✅ Mostra preview de cor (ex: rgba(48, 48, 48, 1) com quadradinho colorido).
Tokens Numéricos:
fontSize: theme.getAsNumber("v2.fontSizeThreeandhalfpulse")
Hover:
✅ Mostra o número (ex: 14).
Tokens de Font Family:
fontFamily: theme.get("v2.fontFamily.regular")
Hover:
✅ Mostra o valor real (ex: "RD Modern").
Tokens Soltos (strings no código):
const color = "colorTextNeutralDefault";
Hover:
✅ Também funciona! Mostra o valor real do token.
✅ Arquivos de Suporte
icon-map.json → Mapa de nomes de ícones para unicode.all-tokens.json → Mapa achatado com todos os tokens de cor, tamanho, fonte, etc (importado dos Design Tokens RD).
✅ Autor
Feito com 💛 por Wellington Brito - RD Saúde
