Semantic Text

Betav1.0.0

엔터프라이즈 semantic color 패턴 (SAP UI5 등 참고). 수치·라벨의 의미를 5단계 색으로 일관 표현 — positive (이익) / negative (손실) / critical (경고) / informative (정보) / neutral (기본).

Loading…

import { SemanticText } from "@/components/ui/semantic-text";

<SemanticText state="positive">+$12,450</SemanticText>
<SemanticText state="negative">-$2,100</SemanticText>
<SemanticText state="critical">Approaching limit</SemanticText>
<SemanticText state="informative">New version available</SemanticText>
<SemanticText state="neutral">$5,230</SemanticText>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/semantic-text.json

Color tokens

CSS 변수로 정의 — 4개 테마 (Light/Dark/HCB/HCW) 모두 자동 지원.

State	CSS variable	사용 의미
positive	--positive	이익, 증가, 성공
negative	--negative	손실, 감소, 에러
critical	--critical	경고, 임계치, 주의
informative	--informative	정보, 알림
neutral	--foreground	기본 (의미 없음)

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

utils

Accessibility

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.4.1 1.4.3

Notes

•WCAG 1.4.1 — 색만으로 의미 전달 X. 항상 텍스트 라벨 동반 ('+' 부호 등).
•4개 테마 (Light/Dark/HCB/HCW) 모두 대비율 검증된 토큰 사용.