lumir-design-tokens

v0.0.4

Published

10 months ago

Lumir Design System 토큰

0High
0Medium
0Low

hwang1401

design-system design-tokens tokens css scss variables lumir colors typography spacing

🎨 Lumir Design Tokens

일관된 디자인을 위한 디자인 토큰 시스템

Lumir Design System의 핵심이 되는 디자인 토큰들을 제공합니다. 색상, 타이포그래피, 간격, 그림자 등 모든 디자인 요소를 체계적으로 관리하여 일관된 사용자 경험을 제공합니다.

🚀 설치

npm install lumir-design-tokens

📖 빠른 시작

CSS에서 사용하기

/* 전역 스타일에 토큰 불러오기 */
@import 'lumir-design-tokens/dist/css/tokens.css';

/* CSS 변수로 토큰 사용 */
.my-component {
  background-color: var(--color-background-primary);
  color: var(--color-text-primary);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-sm);
}

SCSS에서 사용하기

// SCSS 변수로 토큰 불러오기
@import 'lumir-design-tokens/dist/scss/tokens.scss';

.my-component {
  background-color: $color-background-primary;
  color: $color-text-primary;
  padding: $spacing-lg;
  border-radius: $border-radius-md;
  box-shadow: $shadow-sm;
}

JavaScript/TypeScript에서 사용하기

import tokens from 'lumir-design-tokens'

// 토큰 값 접근
const primaryColor = tokens.color.background.primary
const largePadding = tokens.spacing.lg
const mediumRadius = tokens.borderRadius.md

// 스타일 객체에 사용
const styles = {
  backgroundColor: tokens.color.background.primary,
  color: tokens.color.text.primary,
  padding: tokens.spacing.lg,
  borderRadius: tokens.borderRadius.md,
  boxShadow: tokens.shadow.sm
}

🎨 토큰 카테고리

🌈 색상 (Colors)

Foundation 색상

Primary: 브랜드 메인 색상
Secondary: 보조 색상
Neutral: 회색 계열
Success: 성공 상태
Warning: 경고 상태
Error: 오류 상태
Info: 정보 상태

Semantic 색상

Background: 배경색 (primary, secondary, tertiary)
Text: 텍스트 색상 (primary, secondary, tertiary)
Border: 테두리 색상
Surface: 표면 색상

/* 사용 예시 */
.card {
  background-color: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  color: var(--color-text-primary);
}

📏 간격 (Spacing)

체계적인 8px 기반 간격 시스템:

--spacing-xs: 4px
--spacing-sm: 8px
--spacing-md: 16px
--spacing-lg: 24px
--spacing-xl: 32px
--spacing-xxl: 48px
--spacing-xxxl: 64px
--spacing-4xl: 96px

/* 사용 예시 */
.container {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

🔤 타이포그래피 (Typography)

폰트 패밀리

--font-family-default: 기본 폰트
--font-family-heading: 제목용 폰트
--font-family-mono: 모노스페이스 폰트

폰트 크기

--font-size-xs: 12px
--font-size-sm: 14px
--font-size-md: 16px
--font-size-lg: 18px
--font-size-xl: 20px
--font-size-xxl: 24px
--font-size-xxxl: 32px

폰트 굵기

--font-weight-regular: 400
--font-weight-medium: 500
--font-weight-bold: 700

줄 높이

--line-height-tight: 1.2
--line-height-normal: 1.5
--line-height-relaxed: 1.75

/* 사용 예시 */
.heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

🔲 모서리 (Border Radius)

--border-radius-none: 0px
--border-radius-xs: 2px
--border-radius-sm: 4px
--border-radius-md: 8px
--border-radius-lg: 12px
--border-radius-xl: 16px
--border-radius-full: 50%

🌫️ 그림자 (Shadows)

--shadow-none: 그림자 없음
--shadow-xs: 미세한 그림자
--shadow-sm: 작은 그림자
--shadow-md: 중간 그림자
--shadow-lg: 큰 그림자
--shadow-xl: 매우 큰 그림자

/* 사용 예시 */
.card {
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-md);
}

📐 레이아웃 (Layout)

컨테이너 크기

--container-xs: 480px
--container-sm: 640px
--container-md: 768px
--container-lg: 1024px
--container-xl: 1280px

Z-Index

--z-index-dropdown: 1000
--z-index-modal: 1050
--z-index-tooltip: 1100

🎯 사용 패턴

컴포넌트 스타일링

/* 버튼 컴포넌트 예시 */
.button {
  /* 기본 스타일 */
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.button--primary {
  background-color: var(--color-primary-500);
  color: var(--color-text-onColor);
}

.button--primary:hover {
  background-color: var(--color-primary-600);
  box-shadow: var(--shadow-sm);
}

반응형 디자인

/* 반응형 간격 */
.section {
  padding: var(--spacing-md);
}

@media (min-width: 768px) {
  .section {
    padding: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--spacing-xl);
  }
}

다크 모드 준비

/* 라이트 모드 (기본) */
:root {
  --color-background: var(--color-neutral-50);
  --color-text: var(--color-neutral-900);
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--color-neutral-900);
    --color-text: var(--color-neutral-50);
  }
}

🔧 커스터마이징

CSS 변수 오버라이드

/* 프로젝트별 커스터마이징 */
:root {
  /* 브랜드 색상 변경 */
  --color-primary-500: #your-brand-color;
  
  /* 폰트 패밀리 변경 */
  --font-family-default: 'Your Font', sans-serif;
  
  /* 간격 시스템 조정 */
  --spacing-base: 10px; /* 기본 8px에서 10px로 변경 */
}

SCSS 변수 활용

// 프로젝트 설정
$brand-primary: #your-color;
$custom-spacing: 12px;

// 토큰 불러오기 전에 변수 정의
@import 'lumir-design-tokens/dist/scss/tokens.scss';

// 커스텀 믹스인
@mixin card-style {
  background-color: $color-background-primary;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
  padding: $spacing-lg;
}

📱 플랫폼별 사용법

React/Next.js

// _app.js 또는 layout.js
import 'lumir-design-tokens/dist/css/tokens.css'

// 컴포넌트에서 사용
const Button = ({ children, ...props }) => (
  <button 
    style={{
      backgroundColor: 'var(--color-primary-500)',
      color: 'var(--color-text-onColor)',
      padding: 'var(--spacing-sm) var(--spacing-md)',
      borderRadius: 'var(--border-radius-md)',
      border: 'none'
    }}
    {...props}
  >
    {children}
  </button>
)

Vue.js

<template>
  <button class="custom-button">
    <slot />
  </button>
</template>

<style scoped>
@import 'lumir-design-tokens/dist/css/tokens.css';

.custom-button {
  background-color: var(--color-primary-500);
  color: var(--color-text-onColor);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: none;
}
</style>

Angular

// styles.css (전역)
@import 'lumir-design-tokens/dist/css/tokens.css';

// component.scss
.button {
  background-color: var(--color-primary-500);
  color: var(--color-text-onColor);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  border: none;
}

🎨 아이콘 시스템

토큰 패키지에는 SVG 아이콘들도 포함되어 있습니다:

// 아이콘 경로 접근
import iconPath from 'lumir-design-tokens/icons/heart.svg'

// React에서 사용
import HeartIcon from 'lumir-design-tokens/icons/heart.svg?react'

🔍 토큰 탐색

사용 가능한 모든 토큰 확인

import tokens from 'lumir-design-tokens'

// 모든 토큰 출력
console.log(tokens)

// 특정 카테고리 확인
console.log(tokens.color)
console.log(tokens.spacing)
console.log(tokens.typography)

브라우저 개발자 도구에서 확인

// 브라우저 콘솔에서 실행
const styles = getComputedStyle(document.documentElement)
const tokens = Array.from(document.styleSheets)
  .flatMap(sheet => Array.from(sheet.cssRules))
  .filter(rule => rule.type === 1)
  .flatMap(rule => Array.from(rule.style))
  .filter(prop => prop.startsWith('--'))

console.log('사용 가능한 토큰들:', tokens)

🌐 브라우저 지원

Chrome (최신 2개 버전)
Firefox (최신 2개 버전)
Safari (최신 2개 버전)
Edge (최신 2개 버전)
IE 11+ (CSS 변수 폴리필 필요)

📦 번들 크기

CSS: ~8KB (gzipped)
SCSS: ~12KB (gzipped)
JS: ~4KB (gzipped)

🤝 기여하기

이슈 리포트: GitHub Issues
토큰 제안: GitHub Discussions
Pull Request 환영!

📄 라이선스

MIT License - 자세한 내용은 LICENSE 파일을 참고하세요.

🔗 관련 링크

Made with ❤️ by Lumir Design Team