GUIDE
라이트·다크를 함께 완성하는 토큰 시스템
GJ Kit의 컴포넌트 스타일은 활성 Theme에서 해석됩니다. Theme와 ThemePair는 생성기를 거친 브랜드 타입이므로 일부 키가 빠진 손조립 객체가 Provider로 들어오는 상황을 막습니다.
토큰 그룹과 역할
색 이름보다 용도를 나타내는 role을 사용합니다. 상태 색은 전경, strong 배경, soft 배경, on-color를 분리해 라이트·다크 대비를 유지합니다.
- colors 31개 역할
- spacing, radius, typography, elevation
- control·input·icon 치수와 tablet·desktop breakpoint
라이트·다크 쌍 생성
공통 브랜드 값은 shared에, 스킴별 차이만 light와 dark에 둡니다. 결과는 두 스킴이 모두 완성된 ThemePair입니다.
TypeScript
const themes = createThemes({
shared: { radius: { sm: 10 } },
dark: { colors: { primary: '#5C9EEA' } },
});스킴 소유와 비 React 소비
UiProvider의 colorScheme은 light, dark, system을 받고 컴포넌트는 useTheme으로 해석된 단일 테마만 읽습니다. 내비게이션처럼 React 트리 밖에서는 getActiveTheme과 subscribeActiveTheme을 사용할 수 있습니다.