KRDS 토큰 매핑

KRDS 토큰 매핑

Source

KRDS token source는 KRDS-uiux/krds-uiux의 tokens/transformed_tokens.json이다.

현재 구현은 전체 JSON을 복사하지 않고, 우선 적용 컴포넌트에 필요한 값만 krdsTokens 객체와 CSS 변수로 노출한다. 원본 구조는 다음 축을 유지한다.

• primitive
• semantic
• mode-light
• mode-high-contrast
• responsive-pc
• responsive-mobile

shadcn Adapter

shadcn variable	KRDS 기준
--background	--krds-color-surface
--foreground	--krds-color-text
--card	--krds-card--surface
--border	--krds-color-border-light
--input	--krds-input--border-color
--ring	--krds-color-primary
--primary	--krds-button--primary-bg
--primary-foreground	--krds-button--primary-fg
--secondary	--krds-button--secondary-bg
--secondary-foreground	--krds-button--secondary-fg

Component Tokens

Component	Token examples
Button	--krds-button--primary-bg, --krds-button--secondary-border, --krds-button--danger-bg
Input	--krds-input--surface, --krds-input--border-color, --krds-input--border-active, --krds-input--border-error
Select	--krds-select--shadow, input border tokens, surface tokens
Card	--krds-card--surface, --krds-card--border, --krds-card--shadow
Dialog	--krds-dialog--surface, --krds-dialog--shadow, --krds-overlay-dimmed
Tooltip	--krds-tooltip--surface, --krds-tooltip--foreground, --krds-elevation-shadow-3

Mode Handling

.krds-high-contrast와 .dark는 high contrast token set을 사용한다. 이 모드에서는 표면, 텍스트, 경계선, focus ring, overlay dimmed 값을 별도로 전환한다.