Skip to content

pantoken / visual-debug

visual-debug

Beta

@pantoken/plugin-visual-debug — o CSS para a propriedade withVisualDebug do InstUI.

Os primitivos de layout do InstUI (View, Flex, Grid, List, …) aceitam withVisualDebug para delinear a caixa e seus filhos ao depurar um layout. Este plugin emite um único modificador com prefixo de hífen, -with-visual-debug, que funciona em qualquer elemento (composto com qualquer base, p.ex. .instui-view -with-visual-debug). A cor do contorno é uma propriedade personalizada --pantoken-visual-debug-color (padrão: um magenta vibrante), portanto é fácil recolorir.

Exemplo

ts
import { toCss } from "@pantoken/css";
import { byTheme } from "@pantoken/tokens";
import { visualDebug } from "@pantoken/plugin-visual-debug";

const css = toCss(byTheme("rebrand"), { plugins: [visualDebug()] });
// <div class="instui-view -with-visual-debug">…</div>

Interfaces

Variáveis

Funções

Referências

default

Renomeia e reexporta visualDebug