Foundation
Design Tokens
모든 recipe가 참조하는 공개 계약입니다. 앱 테마는 --odbd-* 토큰을 override해서 서비스
룩을 만듭니다. 우측 상단 토글로 다크 모드 값을 바로 확인할 수 있습니다.
Colors
semantic 색상 토큰입니다. 스와치는 현재 color mode의 실제 값을 보여줍니다.
--odbd-color-background #f8f6f1 · #0e0e0d--odbd-color-foreground #1a1a1a · #ffffff--odbd-color-muted #e9e8e3 · #5d5c5a--odbd-color-muted-foreground #6b6b67 · #bcbab6--odbd-color-surface #ffffff · #3f3e3c--odbd-color-surface-raised #f8f6f1 · #3f3e3c--odbd-color-border #e9e8e3 · #5d5c5a--odbd-color-border-strong #bcbab6 · #9f9e9b--odbd-color-accent #d4401a · #d4401a--odbd-color-accent-foreground #ffffff · #ffffff--odbd-color-accent-subtle #fdeee9 · #4e0c00--odbd-color-accent-subtle-foreground #8e1f00 · #ee9a81--odbd-color-success #1a8a5c · #1a8a5c--odbd-color-success-foreground #ffffff · #002112--odbd-color-success-subtle #e8f5ee · #00311d--odbd-color-warning #c07800 · #c07800--odbd-color-warning-foreground #ffffff · #291600--odbd-color-warning-subtle #fef3e2 · #3e2400--odbd-color-danger #d4401a · #d4401a--odbd-color-danger-foreground #ffffff · #ffffff--odbd-color-danger-subtle #fdeee9 · #4e0c00--odbd-color-danger-subtle-foreground #8e1f00 · #ee9a81--odbd-color-focus #d4401a · #e0694a--odbd-color-ring color-mix(in srgb, #d4401a 55%, transparent) · color-mix(in srgb, #e0694a 60%, transparent)--odbd-color-ring-subtle color-mix(in srgb, #d4401a 22%, transparent) · color-mix(in srgb, #e0694a 28%, transparent)--odbd-color-overlay rgb(0 0 0 / 0.5) · rgb(0 0 0 / 0.5)Radius
--odbd-radius-none 0--odbd-radius-sm 4px--odbd-radius-md 8px--odbd-radius-lg 12px--odbd-radius-xl 16px--odbd-radius-full 9999pxSpacing
Typography
--odbd-font-size-sm 빠르게 만들고, 계약은 지킵니다 — 14px
--odbd-font-size-md 빠르게 만들고, 계약은 지킵니다 — 16px
--odbd-font-size-lg 빠르게 만들고, 계약은 지킵니다 — 18px
--odbd-font-mono const odbd = createDesignSystem()
Shadow
--odbd-shadow-sm--odbd-shadow-md--odbd-shadow-lgMotion
hover 해서 각 duration의 체감 속도를 비교해보세요.
--odbd-motion-fast 120ms--odbd-motion-normal 180ms--odbd-motion-gentle 400ms--odbd-motion-slow 1600ms