@unikit-bridge/ui 0.0.0-stage → 0.2.0

package/src/index.ts

@@ -0,0 +1,321 @@
+// @unikit-bridge/ui 공개 API (T-6 완성)
+export { cn } from "./lib/utils";
+
+export {
+  Button,
+  buttonVariants,
+  buttonTextVariants,
+  type ButtonProps,
+} from "./components/button";
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+  type CardProps,
+  type CardHeaderProps,
+  type CardTitleProps,
+  type CardDescriptionProps,
+  type CardContentProps,
+  type CardFooterProps,
+} from "./components/card";
+
+export { Input, inputVariants, type InputProps } from "./components/input";
+
+export { Label, labelVariants, type LabelProps } from "./components/label";
+
+export {
+  Badge,
+  badgeVariants,
+  badgeTextVariants,
+  type BadgeProps,
+} from "./components/badge";
+
+// ── shadcn 카탈로그 1차 배치 23종(사이클 30, T-4 통합) ──────────────────────
+
+export { Checkbox, type CheckboxProps } from "./components/checkbox";
+
+export {
+  RadioGroup,
+  RadioGroupItem,
+  type RadioGroupProps,
+  type RadioGroupItemProps,
+} from "./components/radio-group";
+
+export {
+  Switch,
+  switchTrackVariants,
+  switchThumbVariants,
+  type SwitchProps,
+} from "./components/switch";
+
+export {
+  Toggle,
+  toggleVariants,
+  toggleTextVariants,
+  type ToggleProps,
+} from "./components/toggle";
+
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToggleGroupProps,
+  type ToggleGroupItemProps,
+} from "./components/toggle-group";
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  tabsListVariants,
+  type TabsProps,
+  type TabsListProps,
+  type TabsTriggerProps,
+  type TabsContentProps,
+} from "./components/tabs";
+
+export {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  type AccordionProps,
+  type AccordionItemProps,
+  type AccordionTriggerProps,
+  type AccordionContentProps,
+} from "./components/accordion";
+
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+} from "./components/collapsible";
+
+export { Progress, type ProgressProps } from "./components/progress";
+
+export { AspectRatio, type AspectRatioProps } from "./components/aspect-ratio";
+
+export {
+  Skeleton,
+  skeletonVariants,
+  type SkeletonProps,
+} from "./components/skeleton";
+
+export {
+  Separator,
+  separatorVariants,
+  type SeparatorProps,
+} from "./components/separator";
+
+export {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  alertVariants,
+  alertGlyphVariants,
+  alertTitleVariants,
+  alertDescriptionVariants,
+  type AlertProps,
+  type AlertTitleProps,
+  type AlertDescriptionProps,
+} from "./components/alert";
+
+export {
+  Kbd,
+  KbdGroup,
+  kbdVariants,
+  kbdTextVariants,
+  kbdGroupVariants,
+  type KbdProps,
+  type KbdGroupProps,
+} from "./components/kbd";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  tableContainerVariants,
+  tableVariants,
+  tableHeaderVariants,
+  tableBodyVariants,
+  tableFooterVariants,
+  tableRowVariants,
+  tableHeadVariants,
+  tableHeadTextVariants,
+  tableCellVariants,
+  tableCellTextVariants,
+  tableCaptionVariants,
+  tableCaptionTextVariants,
+  type TableProps,
+  type TableHeaderProps,
+  type TableBodyProps,
+  type TableFooterProps,
+  type TableRowProps,
+  type TableHeadProps,
+  type TableCellProps,
+  type TableCaptionProps,
+} from "./components/table";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  breadcrumbListVariants,
+  breadcrumbItemVariants,
+  breadcrumbLinkVariants,
+  breadcrumbLinkTextVariants,
+  breadcrumbPageVariants,
+  breadcrumbSeparatorVariants,
+  breadcrumbSeparatorTextVariants,
+  breadcrumbEllipsisVariants,
+  breadcrumbEllipsisTextVariants,
+  type BreadcrumbProps,
+  type BreadcrumbListProps,
+  type BreadcrumbItemProps,
+  type BreadcrumbLinkProps,
+  type BreadcrumbPageProps,
+  type BreadcrumbSeparatorProps,
+  type BreadcrumbEllipsisProps,
+} from "./components/breadcrumb";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+  paginationVariants,
+  paginationContentVariants,
+  paginationGlyphVariants,
+  paginationLabelVariants,
+  paginationEllipsisVariants,
+  paginationEllipsisTextVariants,
+  type PaginationProps,
+  type PaginationContentProps,
+  type PaginationLinkProps,
+  type PaginationItemProps,
+  type PaginationPreviousProps,
+  type PaginationNextProps,
+  type PaginationEllipsisProps,
+} from "./components/pagination";
+
+export {
+  Textarea,
+  textareaVariants,
+  type TextareaProps,
+} from "./components/textarea";
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+  type AvatarSize,
+  type AvatarProps,
+  type AvatarImageProps,
+  type AvatarFallbackProps,
+  type AvatarBadgeProps,
+  type AvatarGroupProps,
+  type AvatarGroupCountProps,
+} from "./components/avatar";
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+  type EmptyProps,
+  type EmptyHeaderProps,
+  type EmptyTitleProps,
+  type EmptyDescriptionProps,
+  type EmptyContentProps,
+  type EmptyMediaProps,
+} from "./components/empty";
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+  type FieldSetProps,
+  type FieldLegendProps,
+  type FieldGroupProps,
+  type FieldProps,
+  type FieldContentProps,
+  type FieldLabelProps,
+  type FieldTitleProps,
+  type FieldDescriptionProps,
+  type FieldSeparatorProps,
+  type FieldErrorProps,
+} from "./components/field";
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+  type ItemGroupProps,
+  type ItemSeparatorProps,
+  type ItemProps,
+  type ItemMediaProps,
+  type ItemContentProps,
+  type ItemTitleProps,
+  type ItemDescriptionProps,
+  type ItemActionsProps,
+  type ItemHeaderProps,
+  type ItemFooterProps,
+} from "./components/item";
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+  type ButtonGroupProps,
+  type ButtonGroupTextProps,
+  type ButtonGroupSeparatorProps,
+} from "./components/button-group";
+
+// 테마(T-5가 packages/unikit/src/theme/ 을 병렬 생성) — 디렉터리 존재 여부와
+// 무관하게 이 라인은 항상 유지한다(T-6 지시).
+export * from "./theme";

package/src/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** shadcn/ui 표준 cn 유틸 — clsx(조건 결합) + tailwind-merge(클래스 충돌 병합) */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+// UniKit 테마 공개 내보내기 — tokens(단일 출처) + Provider.
+// src/index.ts(T-6 소유)의 `export * from "./theme";`가 이 파일을 가리킨다.
+export * from "./tokens";
+export * from "./provider";

package/src/theme/presets.ts

@@ -0,0 +1,187 @@
+/**
+ * UniKit 프리셋 테마 — 미리 준비된 디자인 세트 3종 (3차 사이클, T-17).
+ *
+ * 값의 원천: docs/sdd/22-design-plan.md §2.3(설계 확정값 표).
+ * 계산 재료는 Tailwind 공식 팔레트(hex) → HSL 채널(소수 1자리)이며,
+ * 색 선택 규칙(22-design-plan §2.2)은 다음과 같다:
+ *   - 라이트 primary  = «흰 전경과 WCAG 대비 ≥4.5:1을 만족하는 가장 밝은 주색 단계»
+ *                      → blue-600(5.17) / emerald-700(5.48) / amber-700(5.02)
+ *   - 다크 primary    = 주색-500
+ *   - 다크 primary-foreground = 중립-950 (주색-950은 blue에서 4.00:1로 미달 — 중립-950은 3종 전부 ≥5.48)
+ *   - 중립 계열 N     = blue→slate, emerald→zinc, amber→stone (shadcn 관례)
+ *   - destructive 쌍·radius = 기본 테마(tokens.ts)값 공통 — 다크 --destructive는
+ *     사이클 30 G4/G5 조정값(0 72% 65%, red-400 계) 반영(22-design-plan §2.3 수정 이력)
+ *
+ * 기본 테마(zinc)는 이 파일에 없다 — src/theme/tokens.ts의 lightTokens/darkTokens이
+ * 곧 기본 프리셋이다(값 사본 금지). registry 항목 이름 매핑은 generate-design.ts의
+ * THEME_ITEMS 상수가 담당한다.
+ *
+ * 주의: 값을 임의로 변경하면 안 된다 — 수정이 필요하면 설계 문서(22-design-plan §2.2·§2.3)를
+ * 먼저 고친다. audit:design가 registry 사본·대비 기준(≥4.5)과의 일치를 검사한다.
+ */
+import type { UnikitThemeTokens } from "./tokens";
+
+/** 프리셋 정의 — label·neutral·primaryStep은 카탈로그 표기용 메타(값 아님) */
+export interface ThemePreset {
+  label: string;
+  /** 중립 계열 이름(slate/zinc/stone) */
+  neutral: string;
+  /** 카탈로그 표기용 라이트 primary 단계(예: "blue-600") */
+  primaryStep: string;
+  light: UnikitThemeTokens;
+  dark: UnikitThemeTokens;
+}
+
+/** 프리셋 3종 — 키 순서는 tokens.ts 선언 순서와 동일(멱등성 기준) */
+export const themePresets = {
+  blue: {
+    label: "Blue",
+    neutral: "slate",
+    primaryStep: "blue-600",
+    light: {
+      "--background": "0 0% 100%",
+      "--foreground": "228.6 84% 4.9%",
+      "--card": "0 0% 100%",
+      "--card-foreground": "228.6 84% 4.9%",
+      "--popover": "0 0% 100%",
+      "--popover-foreground": "228.6 84% 4.9%",
+      "--primary": "221.2 83.2% 53.3%",
+      "--primary-foreground": "0 0% 100%",
+      "--secondary": "210 40% 96.1%",
+      "--secondary-foreground": "222.2 47.4% 11.2%",
+      "--muted": "210 40% 96.1%",
+      "--muted-foreground": "215.4 16.3% 46.9%",
+      "--accent": "210 40% 96.1%",
+      "--accent-foreground": "222.2 47.4% 11.2%",
+      "--destructive": "0 72.2% 50.6%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "214.3 31.8% 91.4%",
+      "--input": "214.3 31.8% 91.4%",
+      "--ring": "221.2 83.2% 53.3%",
+      "--radius": "0.5rem",
+    },
+    dark: {
+      "--background": "228.6 84% 4.9%",
+      "--foreground": "210 40% 98%",
+      "--card": "228.6 84% 4.9%",
+      "--card-foreground": "210 40% 98%",
+      "--popover": "228.6 84% 4.9%",
+      "--popover-foreground": "210 40% 98%",
+      "--primary": "217.2 91.2% 59.8%",
+      "--primary-foreground": "228.6 84% 4.9%",
+      "--secondary": "217.2 32.6% 17.5%",
+      "--secondary-foreground": "210 40% 98%",
+      "--muted": "217.2 32.6% 17.5%",
+      "--muted-foreground": "215 20.2% 65.1%",
+      "--accent": "217.2 32.6% 17.5%",
+      "--accent-foreground": "210 40% 98%",
+      "--destructive": "0 72% 65%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "217.2 32.6% 17.5%",
+      "--input": "217.2 32.6% 17.5%",
+      "--ring": "217.2 91.2% 59.8%",
+      "--radius": "0.5rem",
+    },
+  },
+  emerald: {
+    label: "Emerald",
+    neutral: "zinc",
+    primaryStep: "emerald-700",
+    light: {
+      "--background": "0 0% 100%",
+      "--foreground": "240 10% 3.9%",
+      "--card": "0 0% 100%",
+      "--card-foreground": "240 10% 3.9%",
+      "--popover": "0 0% 100%",
+      "--popover-foreground": "240 10% 3.9%",
+      "--primary": "162.9 93.5% 24.3%",
+      "--primary-foreground": "0 0% 100%",
+      "--secondary": "240 4.8% 95.9%",
+      "--secondary-foreground": "240 5.9% 10%",
+      "--muted": "240 4.8% 95.9%",
+      "--muted-foreground": "240 3.8% 46.1%",
+      "--accent": "240 4.8% 95.9%",
+      "--accent-foreground": "240 5.9% 10%",
+      "--destructive": "0 72.2% 50.6%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "240 5.9% 90%",
+      "--input": "240 5.9% 90%",
+      "--ring": "162.9 93.5% 24.3%",
+      "--radius": "0.5rem",
+    },
+    dark: {
+      "--background": "240 10% 3.9%",
+      "--foreground": "0 0% 98%",
+      "--card": "240 10% 3.9%",
+      "--card-foreground": "0 0% 98%",
+      "--popover": "240 10% 3.9%",
+      "--popover-foreground": "0 0% 98%",
+      "--primary": "160.1 84.1% 39.4%",
+      "--primary-foreground": "240 10% 3.9%",
+      "--secondary": "240 3.7% 15.9%",
+      "--secondary-foreground": "0 0% 98%",
+      "--muted": "240 3.7% 15.9%",
+      "--muted-foreground": "240 5% 64.9%",
+      "--accent": "240 3.7% 15.9%",
+      "--accent-foreground": "0 0% 98%",
+      "--destructive": "0 72% 65%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "240 3.7% 15.9%",
+      "--input": "240 3.7% 15.9%",
+      "--ring": "160.1 84.1% 39.4%",
+      "--radius": "0.5rem",
+    },
+  },
+  amber: {
+    label: "Amber",
+    neutral: "stone",
+    primaryStep: "amber-700",
+    light: {
+      "--background": "0 0% 100%",
+      "--foreground": "20 14.3% 4.1%",
+      "--card": "0 0% 100%",
+      "--card-foreground": "20 14.3% 4.1%",
+      "--popover": "0 0% 100%",
+      "--popover-foreground": "20 14.3% 4.1%",
+      "--primary": "26 90.5% 37.1%",
+      "--primary-foreground": "0 0% 100%",
+      "--secondary": "60 4.8% 95.9%",
+      "--secondary-foreground": "24 9.8% 10%",
+      "--muted": "60 4.8% 95.9%",
+      "--muted-foreground": "25 5.3% 44.7%",
+      "--accent": "60 4.8% 95.9%",
+      "--accent-foreground": "24 9.8% 10%",
+      "--destructive": "0 72.2% 50.6%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "20 5.9% 90%",
+      "--input": "20 5.9% 90%",
+      "--ring": "26 90.5% 37.1%",
+      "--radius": "0.5rem",
+    },
+    dark: {
+      "--background": "20 14.3% 4.1%",
+      "--foreground": "60 9.1% 97.8%",
+      "--card": "20 14.3% 4.1%",
+      "--card-foreground": "60 9.1% 97.8%",
+      "--popover": "20 14.3% 4.1%",
+      "--popover-foreground": "60 9.1% 97.8%",
+      "--primary": "37.7 92.1% 50.2%",
+      "--primary-foreground": "20 14.3% 4.1%",
+      "--secondary": "12 6.5% 15.1%",
+      "--secondary-foreground": "60 9.1% 97.8%",
+      "--muted": "12 6.5% 15.1%",
+      "--muted-foreground": "24 5.4% 63.9%",
+      "--accent": "12 6.5% 15.1%",
+      "--accent-foreground": "60 9.1% 97.8%",
+      "--destructive": "0 72% 65%",
+      "--destructive-foreground": "0 0% 98%",
+      "--border": "12 6.5% 15.1%",
+      "--input": "12 6.5% 15.1%",
+      "--ring": "37.7 92.1% 50.2%",
+      "--radius": "0.5rem",
+    },
+  },
+} as const satisfies Record<string, ThemePreset>;
+
+/** 프리셋 키 집합("blue" | "emerald" | "amber") */
+export type PresetKey = keyof typeof themePresets;

package/src/theme/provider.tsx

@@ -0,0 +1,82 @@
+/**
+ * UniKit 테마 Provider — colorScheme 상태를 보유하고 브리지를 통해
+ * 각 플랫폼의 스타일링 엔진에 반영한다.
+ *
+ * 메커니즘(엔진 교체: NativeWind → 브리지 구조):
+ * - 토큰 값은 이제 JS 주입(vars())이 아니라 소비자 앱의 global.css에 상주한다
+ *   (기본값 = generate:design이 tokens.ts에서 생성).
+ * - 이 Provider는 스킴 상태만 보유하고, 변경 시 bridge.applyColorScheme을 호출한다:
+ *   · native → uniwind Uniwind.setTheme(다크 변형·CSS 변수가 활성 테마로 전환)
+ *   · web    → 문서 루트 .dark 클래스 토글(표준 Tailwind dark 변형)
+ *
+ * 동작 규격(02-design §1.4): 즉시 전환, 영속화 없음, 기본값 라이트.
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { applyColorScheme } from "@unikit-bridge/ui/primitives";
+
+import type { UnikitColorScheme } from "./tokens";
+
+export type UnikitThemeContextValue = {
+  /** 현재 색 스킴 */
+  colorScheme: UnikitColorScheme;
+  /** 스킴 직접 지정 */
+  setColorScheme: (colorScheme: UnikitColorScheme) => void;
+  /** 라이트 ↔ 다크 즉시 전환 */
+  toggleColorScheme: () => void;
+};
+
+const UnikitThemeContext = createContext<UnikitThemeContextValue | null>(null);
+
+export type UnikitThemeProviderProps = {
+  children: ReactNode;
+  /** 초기 스킴(기본값 "light" — 02-design §1.4) */
+  defaultColorScheme?: UnikitColorScheme;
+};
+
+export function UnikitThemeProvider({
+  children,
+  defaultColorScheme = "light",
+}: UnikitThemeProviderProps) {
+  const [colorScheme, setColorScheme] =
+    useState<UnikitColorScheme>(defaultColorScheme);
+
+  const value = useMemo<UnikitThemeContextValue>(
+    () => ({
+      colorScheme,
+      setColorScheme,
+      toggleColorScheme: () =>
+        setColorScheme((prev) => (prev === "light" ? "dark" : "light")),
+    }),
+    [colorScheme],
+  );
+
+  // 스킴 → 엔진 바인딩(마운트 시 기본값도 반영 — 네이티브에서 adaptive system
+  // 테마 대신 설계 기본값 라이트로 고정된다, 02-design §1.4).
+  useEffect(() => {
+    applyColorScheme(colorScheme);
+  }, [colorScheme]);
+
+  return (
+    <UnikitThemeContext.Provider value={value}>
+      {children}
+    </UnikitThemeContext.Provider>
+  );
+}
+
+/** 현재 테마 상태 접근 훅 — UnikitThemeProvider 내부에서만 사용할 수 있다 */
+export function useUnikitTheme(): UnikitThemeContextValue {
+  const context = useContext(UnikitThemeContext);
+  if (context == null) {
+    throw new Error(
+      "useUnikitTheme는 UnikitThemeProvider 내부에서 사용해야 합니다.",
+    );
+  }
+  return context;
+}

package/src/theme/tokens.ts

@@ -0,0 +1,75 @@
+/**
+ * UniKit 디자인 토큰 — 라이트/다크 단일 출처(single source of truth).
+ *
+ * 값의 원천: docs/sdd/02-design.md §2.1(색 19종, HSL 채널값)·§2.2(반경).
+ * 값 형식은 TW3 `hsl(var(--token))` 매핑과 호환하는 HSL 채널 문자열("H S% L%")이며,
+ * `vars()` 주입(웹·네이티브 공통)과 apps/web/app/globals.css의 변수 블록이
+ * 이 객체를 그대로 복사한 값이다(완료 기준: 값 1:1 대조).
+ *
+ * 주의: 값을 임의로 변경하면 안 된다 — 수정이 필요하면 설계 문서(02-design)를 먼저 고친다.
+ * `--destructive`(라이트)는 shadcn 기본값이 아닌 red-600 계(02-design §2.1 주석, WCAG AA 확보).
+ * `--destructive`(다크)도 shadcn 원본 대비 red-400 계로 조정(사이클 30 G4 — 원본 값은
+ * 다크 배경 대비 1.99:1로 텍스트가 사실상 안 읽힘. 조정값 6.1:1).
+ * `--radius`는 스킴과 무관한 공통값(§2.2)이며 두 객체에 동일하게 포함한다.
+ */
+
+export type UnikitColorScheme = "light" | "dark";
+
+/** 라이트 스킴 토큰(기본값 — 02-design §1.4) */
+export const lightTokens = {
+  "--background": "0 0% 100%",
+  "--foreground": "240 10% 3.9%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "240 10% 3.9%",
+  "--popover": "0 0% 100%",
+  "--popover-foreground": "240 10% 3.9%",
+  "--primary": "240 5.9% 10%",
+  "--primary-foreground": "0 0% 98%",
+  "--secondary": "240 4.8% 95.9%",
+  "--secondary-foreground": "240 5.9% 10%",
+  "--muted": "240 4.8% 95.9%",
+  "--muted-foreground": "240 3.8% 46.1%",
+  "--accent": "240 4.8% 95.9%",
+  "--accent-foreground": "240 5.9% 10%",
+  "--destructive": "0 72.2% 50.6%",
+  "--destructive-foreground": "0 0% 98%",
+  "--border": "240 5.9% 90%",
+  "--input": "240 5.9% 90%",
+  "--ring": "240 5.9% 10%",
+  "--radius": "0.5rem",
+} as const;
+
+/** 다크 스킴 토큰 — satisfies로 라이트와 키 집합이 동일함을 컴파일 타임에 강제 */
+export const darkTokens = {
+  "--background": "240 10% 3.9%",
+  "--foreground": "0 0% 98%",
+  "--card": "240 10% 3.9%",
+  "--card-foreground": "0 0% 98%",
+  "--popover": "240 10% 3.9%",
+  "--popover-foreground": "0 0% 98%",
+  "--primary": "0 0% 98%",
+  "--primary-foreground": "240 5.9% 10%",
+  "--secondary": "240 3.7% 15.9%",
+  "--secondary-foreground": "0 0% 98%",
+  "--muted": "240 3.7% 15.9%",
+  "--muted-foreground": "240 5% 64.9%",
+  "--accent": "240 3.7% 15.9%",
+  "--accent-foreground": "0 0% 98%",
+  "--destructive": "0 72% 65%",
+  "--destructive-foreground": "0 0% 98%",
+  "--border": "240 3.7% 15.9%",
+  "--input": "240 3.7% 15.9%",
+  "--ring": "240 4.9% 83.9%",
+  "--radius": "0.5rem",
+} as const satisfies Record<keyof typeof lightTokens, string>;
+
+/** 토큰 CSS 변수 이름(--background 등 색 19종 + --radius) */
+export type UnikitThemeTokenName = keyof typeof lightTokens;
+
+/** CSS 변수 이름 → 값("H S% L%" 문자열) 매핑. vars() 주입·globals.css 복사 양쪽에 쓴다. */
+export type UnikitThemeTokens = Record<UnikitThemeTokenName, string>;
+
+/** 스킴에 해당하는 토큰 객체를 반환한다 */
+export function getThemeTokens(colorScheme: UnikitColorScheme): UnikitThemeTokens {
+  return colorScheme === "dark" ? darkTokens : lightTokens;
+}