Persona

프레임워크에 의존하지 않는 Web Components 기반 디자인 시스템입니다.

사용

<link rel="stylesheet" href="persona.css">
<script type="module" src="persona.js"></script>
<persona-button variant="primary">저장</persona-button>
<persona-input label="이메일" required></persona-input>

컴포넌트는 persona-button, persona-input, persona-badge, persona-card를 제공합니다. 모든 컴포넌트는 Shadow DOM, CSS Parts, Slots를 사용하며 persona-* 이벤트를 발생시킵니다.

개발

yarn dev
yarn build

data-theme="dark"를 html 또는 body에 지정하면 다크 테마를 사용할 수 있습니다. --persona-* CSS 변수를 오버라이드해 브랜드 토큰을 변경할 수 있습니다.