문서

유틸리티 표

공유 유틸리티 표와 실용적인 예제입니다.

그룹별 네임스페이스

유틸리티 그룹 표
그룹	유틸리티 키	설명
General paint	`bg`, `background-color`, `fg`, `color`, `accent-color`, `fill`	Use palette steps and hue aliases for broad paint decisions.
Surfaces	`surface`	Use surface roles for panels, cards, overlays, and inverse blocks.
선 역할	`b`, `bt`, `br`, `bb`, `bl`, `border-color`, `outline-color`, `stroke`	Use line roles for borders, dividers, outlines, and strokes.

변수 출처

네임스페이스	사용 항목
`color-*`	`accent-` `b-` `bb-` `bg-` `bl-` `br-` 키 13개 더 보기 `bt-` `bx-` `bxe-` `bxs-` `by-` `bye-` `bys-` `caret-` `fg-` `fill-` `outline-` `stroke-` `text-fill-color-`

사용 위치: 색상 가이드.

사용법과 인터페이스

NamespaceUtilityTable은 토큰 네임스페이스를 이를 받는 유틸리티 키와 연결합니다. 그룹에 설명이 있으면 원래 Guide의 그룹, 유틸리티 키, 설명 열을 따로 유지합니다. 다듬은 공유 스타일은 조용한 구분선과 일관된 읽기 리듬을 사용합니다. 좁은 화면에서는 키보드로 포커스 가능한 자체 영역 안에서 표만 스크롤되고 페이지 너비는 고정됩니다.

<NamespaceUtilityTable groups={[  { label: 'Surfaces', namespace: 'color-surface',    keys: ['surface'], description: 'Panels, cards and overlays.' }]} />

독자를 위한 그룹 이름과 manifest의 소스 키를 제공하세요. namespace 또는 namespaces는 지원하지 않는 키를 걸러냅니다. 설명이 없으면 표는 두 열을 사용합니다. 문서 읽기를 돕는 요소이므로 측정하는 데모 레이아웃 밖에 두세요. 실제 사용 예는 색상, 간격, 타이포그래피, 유틸리티 표 검토 페이지를 참고하세요.