pantoken / visual-debug

visual-debug ​

Beta

@pantoken/plugin-visual-debug — das CSS für die withVisualDebug-Eigenschaft von InstUI.

InstUIs Layout-Primitiven (View, Flex, Grid, List, …) nehmen withVisualDebug an, um das Kästchen und seine Kinder beim Debuggen des Layouts zu umranden. Dieses Plugin erzeugt einen einzigen mit Bindestrich vorgezeichneten Modifikator, -with-visual-debug, der auf jedes Element wirkt (kombinierbar mit jeder Basis, z. B. .instui-view -with-visual-debug). Die Umrissfarbe ist eine --pantoken-visual-debug-color-Custom-Property (standardmäßig ein leuchtendes Magenta), sodass sie leicht neu eingefärbt werden kann.

Beispiel ​

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>

Schnittstellen ​

Variablen ​

Funktionen ​

Referenzen ​

default ​

Benennt visualDebug um und exportiert es erneut