Styleguide — Document Server

색상 토큰

{#each colorTokens as t (t.name)}

{t.name}

{/each}

domain

{#each domainTokens as t (t.name)}

{t.name}

{/each}

Radius

{#each radiusTokens as r (r.name)}

{r.name}

{/each}

Button

variant × size

아이콘 + 상태

href (자동 a 변환)

IconButton

Card

기본 padded

bg-surface + rounded-card + border-default

padded={false}

내부에서 직접 padding 제어

addToast('info', 'Card 클릭됨')}>

interactive

클릭 시 hover + button 시맨틱

Badge

neutral success warning error accent

sm neutral 완료 대기 실패

Skeleton

EmptyState

입력 프리미티브

<div class="text-xs text-faint">
        현재 값:
        <code class="text-text">{JSON.stringify({ textValue, textareaValue, selectValue })}</code>
      </div>
    </section>

<section class="space-y-3">
      <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">Tabs</h2>
      <Card padded={false}>
        <Tabs {tabs} bind:value={tabValue}>
          {#snippet children(activeId)}
            <div class="p-5">
              {#if activeId === 'overview'}
                <p class="text-sm text-text">📋 개요 패널 — 좌우 화살표 키로 탭 이동.</p>
              {:else if activeId === 'edit'}
                <p class="text-sm text-text">✏️ 편집 패널.</p>
              {:else if activeId === 'history'}
                <p class="text-sm text-text">🕓 이력 패널.</p>
              {/if}
            </div>
          {/snippet}
        </Tabs>
      </Card>
    </section>

<section class="space-y-3">
      <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">Drawer (단일 slot)</h2>
      <p class="text-xs text-faint">
        둘 다 열어 보세요. sidebar 열려 있을 때 meta를 누르면 sidebar가 자동으로 닫힙니다.
      </p>
      <div class="flex gap-2">
        <Button variant="secondary" icon={Menu} onclick={openSidebarDrawer}>Sidebar drawer</Button>
        <Button variant="secondary" icon={FileText} onclick={openMetaDrawer}>Meta drawer (오른쪽)</Button>
      </div>
    </section>

<section class="space-y-3">
      <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">Modal (stack 지원)</h2>
      <p class="text-xs text-faint">
        Simple modal 안에서 "또 열기"를 누르면 nested modal이 위에 쌓입니다. Esc는 가장 위 modal부터 닫습니다.
      </p>
      <div class="flex flex-wrap gap-2">
        <Button variant="primary" onclick={openSimpleModal}>Simple Modal 열기</Button>
        <Button variant="danger" icon={Trash2} onclick={openConfirm}>ConfirmDialog 열기</Button>
      </div>
    </section>

<section class="space-y-3 pb-12">
      <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">Toast</h2>
      <p class="text-xs text-faint">현재 토스트는 기존 +layout.svelte 렌더러 사용 — A-8에서 토큰 swap 예정.</p>
      <div class="flex flex-wrap gap-2">
        <Button variant="ghost" size="sm" onclick={() => addToast('success', '저장 완료')}>success</Button>
        <Button variant="ghost" size="sm" onclick={() => addToast('error', '저장 실패')}>error</Button>
        <Button variant="ghost" size="sm" onclick={() => addToast('warning', '경고')}>warning</Button>
        <Button variant="ghost" size="sm" onclick={() => addToast('info', '정보')}>info</Button>
      </div>
    </section>
  </div>
</div>

<Drawer id="sidebar" side="left" width="sidebar" aria-label="Sidebar drawer 데모">
  <div class="p-5 space-y-3">
    <h3 class="text-sm font-semibold text-text">Sidebar drawer</h3>
    <p class="text-xs text-dim">id="sidebar". 단일 slot이므로 meta drawer가 열리면 자동으로 닫힙니다.</p>
    <Button variant="ghost" size="sm" onclick={() => ui.closeDrawer()}>닫기</Button>
  </div>
</Drawer>

<Drawer id="meta" side="right" width="rail" aria-label="Meta drawer 데모">
  <div class="p-5 space-y-3">
    <h3 class="text-sm font-semibold text-text">Meta drawer</h3>
    <p class="text-xs text-dim">id="meta". 모바일/태블릿에서 메타 패널 폴백으로 쓰일 layer.</p>
    <Button variant="ghost" size="sm" onclick={() => ui.closeDrawer()}>닫기</Button>
  </div>
</Drawer>

<Modal id="demo-simple" title="Simple modal">
  <div class="space-y-3">
    <p>이 모달은 stack에 1개만 있습니다. 안에서 "또 열기"를 누르면 nested modal이 쌓입니다.</p>
    <p class="text-xs text-faint">stack 인덱스로 z-index가 자동 계산되어 backdrop이 정확히 겹칩니다.</p>
  </div>
  {#snippet footer()}
    <Button variant="ghost" size="sm" onclick={() => ui.closeModal('demo-simple')}>닫기</Button>
    <Button variant="primary" size="sm" onclick={openNestedModal}>또 열기 (nested)</Button>
  {/snippet}
</Modal>

<Modal id="demo-nested" title="Nested modal" size="sm">
  <p>nested modal입니다. Esc를 누르면 이것만 닫히고, 아래 simple modal은 그대로 남습니다.</p>
  {#snippet footer()}
    <Button variant="primary" size="sm" onclick={() => ui.closeTopModal()}>이것만 닫기</Button>
  {/snippet}
</Modal>