TintPanel

한눈에#

카드 안에서 한 영역을 중첩 블록으로 묶는 컨테이너입니다 — active면 틴트 배경과 accent 보더로 그 블록을 끌어올립니다. 위저드의 현재 단계, 추천 플랜처럼 여러 블록 중 하나를 강조할 때 씁니다.

단계 1 · 진행 중

인증 앱으로 QR 코드를 스캔하세요.

단계 2 · 대기

표시된 6자리 코드를 입력하면 완료됩니다.

• 카드 안 중첩 영역
• active=틴트+accent 보더
• 위저드 단계·추천 블록
• 보더 강조(DD-6 무관)

active는 배경 틴트 + accent 보더 — 잉크가 아니라 보더로 강조해 대비 부담이 없습니다

사용 시점#

카드 안에서 한 영역을 강조·구획할 때만 TintPanel — 카드 밖 독립 메시지나 독립 표면이면 다른 컴포넌트입니다.

변형·상태#

기본

차분한 surface 배경 + 중립 보더.

active

primary-subtle 틴트 + primary 보더로 강조.

active 전환은 소비자가 토글합니다 — 예로 코드 입력에 포커스가 가면 해당 단계 패널을 active로 올립니다. 강조는 보더와 배경으로 표현해 잉크 대비(DD-6)와 무관합니다.

플레이그라운드#

TintPanel를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

Props#

접근성#

• active 강조는 배경 + 보더 두 채널로 전달합니다 — 색 하나에만 기대지 않습니다
• 강조는 표현(presentation)일 뿐이라 의미가 필요하면 소비자가 배선합니다 — 예: 현재 단계 패널의 부모에 aria-current="step"를 부여
• 보더 색으로 강조하므로 잉크-배경 대비(DD-6)에 영향을 주지 않습니다 — 본문 텍스트는 평소 text 토큰 그대로 AA를 유지합니다
• 일반 div라 별도 role이 없습니다 — 필요한 의미만 소비자가 명시적으로 부여하세요

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

관련#