Tone
먼저 보고, 그다음 계약을 읽습니다
표면 톤 래퍼 — Signature / Editorial / Console.
Component intent의도와 경계 읽기
subtree 안에서만 디스플레이 페이스 · radius 스케일 · 숫자 표기를 재조합하는 스코프드 레이어다. 구조층(gray ramp · bg/text · 보더 · 상태색 success/warning/danger/info · 대비 AA · 그림자)은 건드리지 않아 다테넌트 대비/의미 보장이 유지되고, 브랜드 리컬러(theme-manifest --brand/accent/cta)와 직교한다. 본문 텍스트는 톤 무관 --font-sans 를 유지하며 디스플레이 자리만 교체한다. signature=브랜드 기본(Pretendard · radius 기본), editorial=문서/격식(display Clash opt-in · crisp radius), console=데이터/터미널(display mono · tight radius · tabular-nums). 각 톤은 tone-controlled 값 전부를 재선언(complete reset)하므로 톤을 중첩해도 안쪽 톤이 바깥 값을 상속하지 않는다. 각각 axelabs.ai·blueprint / gate·layer·IC / index·matrix 표면에 대응한다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { Tone, Card, Badge } from "@axe/ui";export function Example() { return ( <Tone variant="editorial"> <Card> <h3>Executive Summary</h3> <Badge variant="success">승인</Badge> </Card> </Tone> );}<div class="axe-tone-console"> <table class="axe-doc__table">…</table></div>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
variant | "signature" | "editorial" | "console" | — | "signature" | 표면 톤. `.axe-tone-<variant>` 스코프를 적용한다. |
...rest | React.HTMLAttributes<HTMLDivElement> | — | — | className 병합 후 나머지 속성은 래퍼 <div> 로 전파. ref 지원(forwardRef). |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-tone-signature | stable | 브랜드 기본 톤 — Pretendard · radius 기본 (complete reset). |
.axe-tone-editorial | stable | 문서/격식 톤 — display=Clash(opt-in) · crisp radius. |
.axe-tone-console | stable | 데이터/터미널 톤 — display=mono · tight radius · tabular-nums. |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
순수 시각 래퍼 — 별도 role/aria 없음. 상호작용·시맨틱 미부여(디스플레이 페이스·radius·숫자 표기만 재조합). 대비·상태색은 톤 무관 불변이라 어느 톤에서도 WCAG 대비가 유지된다. 시맨틱이 필요하면 톤 안/밖의 실제 콘텐츠 요소에 부여한다.