Foundations

Themes

Light / Dark / HCB / HCW 4가지 테마를 한 곳에서 미리보고 전환하세요. 모든 테마는 동일한 CSS 변수 시스템 위에 빌드되어, 컴포넌트는 자동으로 대응합니다.

Select theme

헤더 오른쪽의 테마 아이콘에서도 전환할 수 있습니다. System 옵션은 OS 설정을 따릅니다.

Live preview

현재 테마가 모든 컴포넌트에 어떻게 적용되는지 확인하세요.

Buttons

모든 variant 가 한 번에.

Form

입력 요소들.

Notifications

Badges

상태 라벨.

DefaultSecondaryOutlineDestructive

Progress

다양한 진행 상태.

Typography

텍스트 + 코드.

The quick brown fox jumps over the lazy dog.

현재 테마에서 본문 텍스트는 이렇게 보입니다. muted-foreground 는 보조 텍스트로 사용됩니다.

npm install @groudit/ui

HCB / HCW 안내

High Contrast 테마는 시각장애·저시력 사용자를 위한 WCAG AAA (대비 7:1) 표준 테마입니다. 엔터프라이즈 고대비 테마(SAP UI5 high-contrast 등)와 동일한 원칙을 따릅니다. 운영 시스템에서는 사용자가 직접 선택할 수 있도록 노출하는 것을 권장합니다.