스타일Styling

전역 스타일 불러오기Load the global styles

앱 진입 CSS에서 globals.css를 한 번 import하고, @source 줄로 컴포넌트 소스를 스캔하게 합니다. @source 경로는 앱의 CSS 파일 위치에 맞춰 조정합니다.Import globals.css once in the app entry stylesheet, and add the @source line so Tailwind scans the component sources. Adjust the @source path to where your CSS file sits.

@import "@horon-ai/react/globals.css";
@source "../node_modules/@horon-ai/react/src/**/*.{ts,tsx}";

globals.css가 가져오는 것What globals.css brings

• Tailwind CSS v4와 @theme 토큰: theme.css의 변수가 유틸리티 클래스가 됩니다.Tailwind CSS v4 and the @theme tokens: the theme.css variables become utility classes.
• 서체: Pretendard Variable과 Geist Mono Variable을 @font-face로 불러옵니다.Typefaces: Pretendard Variable and Geist Mono Variable load through @font-face.
• 유리 레이어 스타일: .liquid-layers와 veil-field, veil-overlay, veil-drop입니다.Glass layer styles: .liquid-layers plus veil-field, veil-overlay and veil-drop.
• 기본값: html은 --font-sans를 쓰고, body는 bg-default와 text-primary를 칠합니다.Defaults: html uses --font-sans, and body paints bg-default with text-primary.
• 모션 유틸리티: motion-popup, motion-press 같은 클래스와 prefers-reduced-motion 처리가 들어 있습니다.Motion utilities: classes such as motion-popup and motion-press, plus prefers-reduced-motion handling.

토큰 클래스Token classes

클래스 이름이 곧 토큰입니다. 글자 크기는 text-에 13개 스타일 이름을 붙이고, 색은 text-, bg-, border-에 색 토큰 이름을 붙입니다. 예를 들어 text-label-md, text-text-primary, bg-bg-surface, border-border-default, bg-glass-regular입니다.The class name is the token. Text size is text- plus one of the 13 style names; colour is text-, bg- or border- plus a colour token name. For example text-label-md, text-text-primary, bg-bg-surface, border-border-default and bg-glass-regular.

export function Note() {
  return (
    <section className="rounded-lg border border-border-default bg-bg-surface p-4">
      <p className="text-label-md text-text-primary">Build finished</p>
      <p className="text-body-sm text-text-secondary">3 checks passed, 0 failed.</p>
    </section>
  );
}

클래스로 덮어쓰기Override with a class

컴포넌트는 넘긴 className을 자기 클래스 뒤에 붙입니다. cn()은 토큰 이름을 아는 tailwind-merge라서 text-label-md(크기)와 text-text-primary(색)를 다른 종류로 구분하고, 같은 종류에서는 뒤에 온 클래스가 이깁니다.A component appends the className you pass after its own classes. cn() is a tailwind-merge that knows the token names, so text-label-md (size) and text-text-primary (colour) stay different groups, and within one group the later class wins.

import { Button, cn } from "@horon-ai/react";

export function Actions({ busy }: { busy: boolean }) {
  return (
    <Button className={cn("w-full", busy && "opacity-60")} disabled={busy}>
      Save changes
    </Button>
  );
}

조건부 클래스는 cn()으로 묶습니다. false, null, undefined는 무시합니다.Group conditional classes with cn(); false, null and undefined are dropped.