@uniai-fe/uds-foundation

UNIAI 서비스 전반에서 공유하는 디자인 토큰과 폰트 자산을 CSS 변수 형태로 제공하는 패키지입니다. 색상·여백·레이아웃·타이포그래피·폰트 정의를 모두 포함하며, 다른 패키지(@uniai-fe/uds-primitives, @uniai-fe/uds-templates)의 기초가 됩니다.

설치

pnpm add @uniai-fe/uds-foundation

사용법 요약

1) CSS 변수 주입

import "@uniai-fe/uds-foundation";

CSS 파일만 직접 사용하려면:

import "@uniai-fe/uds-foundation/css";

.button-primary {
  color: var(--color-primary-default);
  padding: var(--spacing-padding-6);
  border-radius: var(--theme-radius-medium-1);
  font: var(--font-body-medium-weight) var(--font-body-medium-size) /
    var(--font-body-medium-line-height) var(--theme-font-family-pretendard);
}

2) 토큰 데이터(JSON)

import { themeTokens } from "@uniai-fe/uds-foundation/data/tokens";

console.log(themeTokens.color.primitive.blue_55);

3) 타입스크립트 헬퍼

import {
  colorPrimitiveVar,
  spacingPaddingPx,
} from "@uniai-fe/uds-foundation/helpers";

const primaryBg = colorPrimitiveVar("blue_55");
const mediumGap = spacingPaddingPx("padding_6");

4) Next.js localFont

import localFont from "next/font/local";
import {
  pretendardLocalFont,
  interLocalFont,
} from "@uniai-fe/uds-foundation/typography/fonts";

export const pretendard = localFont(pretendardLocalFont);
export const inter = localFont(interLocalFont);

5) 패키지 스크립트

• pnpm build: 타입 검사 + CSS/폰트 산출
• pnpm dev: watch 모드
• pnpm tokens:doc: 토큰 스냅샷 생성