TFG Design System

Design system for The Fair Golf

설치

npm install tfg-design-system

패키지 정보

• 패키지 이름: tfg-design-system
• 설명: Design system for The Fair Golf
• 저자: tfg-swbaek
• 이메일: [email protected]

사용법

타이포그래피 예시

타이포그래피 스타일을 적용하려면, typography 객체를 import하여 사용하세요.

import { typography } from 'tfg-design-system';

const styles = {
  heading: {
    ...typography.size['2xl'],
    ...typography.weight.bold,
  },
  paragraph: {
    ...typography.size.base,
    ...typography.weight.regular,
  },
};

디자인 추가 방법

디자인 시스템에 새로운 스타일을 추가하려면 다음 단계를 따르세요:

1. 토큰 파일 수정: src/tokens 폴더 내의 적절한 파일을 엽니다. 예를 들어, 새로운 색상을 추가하려면 colors.ts 파일을 수정합니다.
2. 새로운 스타일 추가: 원하는 스타일 속성을 추가합니다.

// 예시: colors.ts
export const colors = {
  primary: '#007AFF',
  secondary: '#5856D6',
  newColor: '#FF5733', // 새로운 색상 추가
};

3. 빌드 및 배포: 변경 사항을 저장한 후, 라이브러리를 빌드하고 npm에 배포합니다.

npm run build
npm version patch
npm publish

4. 프로젝트 업데이트: 라이브러리의 새로운 버전을 설치하여 프로젝트에서 변경된 스타일을 사용합니다.

npm update tfg-design-system