Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>RD Pulso PreviewNew to Visual Studio Code? Get it now.
RD Pulso Preview

RD Pulso Preview

RD Saúde

|
12 installs
| (2) | Free
Preview para ícones e tokens do Design System RD Pulso no VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

🎨 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


  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft