Theming

두 브랜드 테마를 지원합니다. CSS 파일 하나로 전체 테마가 전환됩니다.

브랜드 테마

테마	Primary 색상	CSS 파일
Featuring	`#5e51ff` (`primary-60`, 보라색 계열)	`featuring.css`
DataEffect	`#0065ff` (`primary-60`, 파란색 계열)	`dataEffect.css`

테마 전환

앱 진입점의 Preset import만 바꾸면 됩니다. Reset, Normalize, 브랜드 토큰, CSS Layer 순서가 한 파일에 들어 있습니다.

// Featuring 테마 (Reset + Normalize + 토큰 + Layer 순서 포함)
import '@featuring-corp/components/preset/featuring';

// DataEffect 테마
import '@featuring-corp/components/preset/dataEffect';

Preset은 @layer ft-reset, ft-normalize, ft-components, ft-utilities 순서를 선언합니다. 소비자 CSS는 레이어 밖에 있으므로 항상 디자인 시스템 스타일보다 우선합니다.

Primary 색상만 달라지며, 나머지 글로벌 토큰(gray, red, blue 등)과 시맨틱 토큰은 동일합니다.

테마별 Primary 팔레트

Shade	Featuring	DataEffect
primary-10	`#ecefff`	`#edf5ff`
primary-20	`#dce2ff`	`#d0e2ff`
primary-30	`#c0c8ff`	`#a6c8ff`
primary-40	`#9aa3ff`	`#4c9aff`
primary-50	`#7273ff`	`#2684ff`
primary-60	`#5e51ff`	`#0065ff`
primary-70	`#5032f9`	`#0052cc`
primary-80	`#3821b2`	`#0747a6`
primary-90	`#31238c`	`#001d6c`
primary-100	`#1f1551`	`#001141`

CSS 변수로 테마 사용

CSS 파일을 import하면 모든 토큰이 :root에 CSS 변수로 등록됩니다:

.my-button {
  background-color: var(--global-colors-primary-60);
  color: var(--global-colors-white);
  border-radius: var(--global-radius-100);
  padding: var(--global-spacing-200) var(--global-spacing-400);
}

.my-button:hover {
  background-color: var(--global-colors-primary-70);
}

시맨틱 토큰도 마찬가지입니다:

.my-card {
  background-color: var(--semantic-color-background-1);
  border: 1px solid var(--semantic-color-border-default);
  color: var(--semantic-color-text-1);
}

JavaScript에서 토큰 접근

import { global, semantic, colorSet } from '@featuring-corp/design-tokens';

// Global tokens
global.colors.red[50]          // '#e97259'
global.spacing[400]            // '1rem'
global.radius[200]             // '8px'
global.elevation[4]            // CSS box-shadow 값
global.typography.fontSize[300] // '0.875rem'

// Semantic tokens (CSS 변수 참조)
semantic.color.background[1]   // 'var(--global-colors-white)'
semantic.color.text[1]         // 'var(--global-colors-gray-90)'

// Color Set — Global Primary의 실제 hex 값 (테마별로 다름)
colorSet.featuringPrimary[60]  // '#5e51ff'
colorSet.dataEffectPrimary[60] // '#0065ff'

컴포넌트 안에서 토큰 사용

Heading/Body/Caption 같은 타입 스케일은 <Typo variant="$heading-3"> 한 줄로 끝납니다.

<Typo variant="$heading-3">제목</Typo>
<Typo variant="$body-2">본문</Typo>
<Typo variant={{ mobile: '$heading-4', desktop: '$heading-2' }} render={<h1 />}>
  반응형 제목
</Typo>

공간·색상·라운딩은 $css prop으로 토큰 이름($spacing-400, $background-1 등)을 참조하면 됩니다. $css 가이드 →, Typo 컴포넌트 →

createGlobalTheme, styleVariants, sprinkles 등 Legacy 스타일링 API에 대한 설명은 Legacy Patterns 페이지에 있습니다.

커스텀 Primary 색상

getGlobalColors에 커스텀 색상 객체를 전달하면 새 브랜드 테마를 만들 수 있습니다.

import { getGlobalColors } from '@featuring-corp/design-tokens';

const customColors = getGlobalColors({
  10: '#fef3e2',
  20: '#fde4b8',
  30: '#fbd38d',
  40: '#f9b851',
  50: '#f6a623',
  60: '#e8930a',
  70: '#c47a08',
  80: '#9f6206',
  90: '#7b4c05',
  100: '#573603',
});