Overview

Getting Started

ODBD는 Ark UI primitive 위에 토큰과 recipe를 얹은 내부 디자인 시스템입니다. 패키지를 설치하고 theme CSS를 한 번 불러오면 모든 컴포넌트가 같은 디자인 언어를 사용합니다.

Install

wrapper 패키지와 theme 패키지를 함께 설치하세요.

pnpm add @odbd/svelte @odbd/theme

Theme CSS

앱 진입점에서 한 번만 불러오세요. reset, 토큰, 기본 테마, recipe가 모두 포함됩니다.

import '@odbd/theme/style.css'

Usage

단일 컴포넌트는 named import, 복합 컴포넌트는 namespace import를 사용하세요. brand와 color mode는 문서 루트(<html>)의 data attribute로 지정하세요 — 색 의미 토큰이 루트에서 파생되기 때문입니다. foundation 컴포넌트의 import 형태는 프레임워크별로 다릅니다(React는 @odbd/react/button 서브패스, Svelte는 @odbd/svelte 루트 — 의도된 차이).

<script lang="ts">
  import '@odbd/theme/style.css'
  import * as Dialog from '@odbd/svelte/dialog'
</script>

<!-- data-brand/data-color-mode는 app.html의 <html>에 둔다 -->
<main>
  <Dialog.Root>
    <Dialog.Trigger class="odbd-button" data-variant="solid" data-size="md">
      Open
    </Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog title</Dialog.Title>
        <Dialog.Description>Dialog body copy.</Dialog.Description>
        <Dialog.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
          Close
        </Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
</main>

import '@odbd/theme/style.css'
import { Button } from '@odbd/react/button'
import { Dialog } from '@odbd/react/dialog'

export function Example() {
  return (
    // data-brand/data-color-mode는 문서 루트(<html>)에 둔다
    <main>
      <Dialog.Root>
        <Dialog.Trigger asChild>
          <Button>Open</Button>
        </Dialog.Trigger>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Title>Dialog title</Dialog.Title>
            <Dialog.Description>Dialog body copy.</Dialog.Description>
            <Dialog.CloseTrigger asChild>
              <Button variant="outline">Close</Button>
            </Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Dialog.Root>
    </main>
  )
}

Theming

서비스 룩은 앱 레벨에서 공개 토큰(--odbd-*)을 override해서 만듭니다. Theme builder에서 값을 조정해보고 그대로 복사할 수 있습니다.

/* app.theme.css — 디자인 시스템 CSS 뒤에 로드 */
/* accent는 ramp 단위로 html 스코프에 덮는다 — 버튼·포커스·다크 모드가
   전부 이 ramp에서 파생된다. 전체 ramp는 Theme Builder가 생성해 준다. */
html[data-brand='my-app'] {
  --odbd-accent-500: #0f766e;
  --odbd-accent-400: color-mix(in srgb, #0f766e 74%, white);
  --odbd-accent-600: color-mix(in srgb, #0f766e 86%, black);
  --odbd-radius-md: 0.625rem;
}