pantoken / visual-debug

visual-debug ​

베타

@pantoken/plugin-visual-debug — InstUI의 withVisualDebug 속성용 CSS입니다.

InstUI의 레이아웃 프리미티브(View, Flex, Grid, List, …)는 레이아웃 디버깅 시 박스와 그 자식들을 윤곽으로 표시하기 위해 withVisualDebug를 사용합니다. 이 플러그인은 모든 요소에서 작동하는 단일 대시 접두사 수식자(-with-visual-debug)를 내보냅니다(어떤 베이스와도 복합 가능, 예: .instui-view -with-visual-debug). 윤곽 색상은 --pantoken-visual-debug-color 커스텀 속성(기본값은 밝은 마젠타)이어서 재채색하기 쉽습니다.

예제 ​

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>

인터페이스 ​

변수 ​

함수 ​

참조 ​

default ​

Renames and re-exports visualDebug