uikit stylefoundation

Base dependencies and design tokens for uikit: status tones, calendar day colors, row density, motion, CJK font stacks, safe-area and hit-area utilities.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/style

uikit 의 기초 아이템입니다. 다른 uikit 아이템이 쓰는 디자인 토큰(상태 색·달력 색·밀도·움직임·언어별 글꼴), 유틸리티(pt-safe·pb-safe·pl-safe·pr-safe·hit-area), 기본 의존성(Base UI, cn, class-variance-authority, lucide-react)을 앱에 넣습니다. 컴포넌트 파일은 없습니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/style

registry/uikit·registry/kr 의 아이템은 모두 이 아이템에 의존하므로 다른 아이템을 받을 때도 함께 설치됩니다. CLI 는 cssVars 를 앱의 globals.css 에 씁니다(light → :root, dark → .dark, 색 토큰은 @theme inline 에 --color-<이름> 으로 등록).

사용

tsx

export function PaymentState() {  return (    <div data-density="compact" className="flex gap-2 pb-safe">      <span className="rounded-md bg-success-subtle px-2 text-success-subtle-foreground">Paid</span>      <span className="rounded-md bg-warning px-2 text-warning-foreground">Pending</span>      <button type="button" className="hit-area text-muted-foreground">        Details      </button>    </div>  );}

속성

토큰	쓰임
`info`, `success`, `warning` 와 `-foreground`, `-subtle`, `-subtle-foreground`, `-border`	상태 색. 진한 바탕(`bg-success text-success-foreground`)과 옅은 바탕(`bg-success-subtle text-success-subtle-foreground`)
`destructive-foreground`, `destructive-subtle`, `destructive-subtle-foreground`, `destructive-border`	stock `destructive` 에 붙이는 같은 짝
`muted-foreground`	밝은 테마는 stock neutral 값(0.556)보다 조금 어둡게(0.54) 바꿔 `muted` 바탕에서도 4.5:1 을 넘깁니다. 어두운 테마는 stock neutral 값(0.708)과 같은 값을 `.dark` 에 함께 써서, 앱의 `globals.css` 에 기본 토큰이 없어도 밝은 값이 어두운 테마로 새지 않습니다
`destructive`	밝은 테마는 stock neutral 값(0.577)보다 어둡게(0.53) 바꿔, `bg-destructive/10` 위의 `text-destructive`(버튼·배지·말풍선)가 4.5:1 을 넘깁니다. 어두운 테마는 stock neutral 값과 같은 값을 `.dark` 에 함께 씁니다
`calendar-holiday`, `calendar-saturday`	달력의 휴일·토요일 글자색
`skeleton`, `scrim`	자리표시 바탕, 오버레이 막
`--row-height`	표·목록 행 높이. `data-density="compact"` 는 2rem, 기본 2.5rem, `comfortable` 은 3rem
`--motion-duration-{instant,fast,base,slow,slower}`, `ease-{standard,enter,exit,emphasized}`	움직임 길이와 곡선. `@plott/webkit-design/motion` 값과 같고, 움직임 줄이기 설정이면 길이가 0ms 입니다
`--font-sans`	기본 글꼴 줄. `:lang(ko)`·`:lang(ja)`·`:lang(zh…)` 에서 그 언어의 시스템 글꼴을 앞에 둡니다(`@plott/webkit-design/typography` 의 `fontLangCss` 와 같은 줄)
`--host-safe-top`, `--host-safe-bottom`	앱 웹뷰가 넣어 주는 안전 영역. `pt-safe`·`pb-safe` 는 이 값과 `env(safe-area-inset-*)` 중 큰 값을 씁니다

유틸리티	뜻
`pt-safe`, `pb-safe`, `pl-safe`, `pr-safe`	노치·홈 표시줄을 피하는 안쪽 여백
`hit-area`	보이는 크기와 상관없이 누를 수 있는 영역을 44px 이상으로 넓힙니다

기본으로 지키는 것

글자와 바탕 짝은 밝은·어두운 테마 모두 WCAG AA(4.5:1) 이상입니다(items/style/style.test.ts). destructive 글자는 자기 옅은 바탕(밝은 테마 10%, 어두운 테마 20%) 위에서도 같습니다.
--font-sans 를 @theme inline 에 넣지 않습니다. 넣으면 Tailwind 가 값을 그대로 박아 :lang() 규칙이 닿지 않습니다.
움직임 줄이기 설정에서는 길이 토큰이 0ms 라 토큰을 쓰는 전환이 바로 끝납니다.

접근성

상태 색만으로 뜻을 전하지 않도록 글자나 아이콘을 함께 씁니다.
작은 아이콘 버튼에는 hit-area 를 붙여 터치 영역을 넓힙니다.

의존

@base-ui/react, class-variance-authority, cn, lucide-react, 개발 의존 tw-animate-css, shadcn(CSS 가져오기). 테마를 바꾸려면 theme-* 아이템을 더합니다(테마).