모든 디자인 토큰
모든 디자인 토큰 (All design tokens)
PatternFly의 모든 디자인 토큰을 한곳에서 모아 보여주는 종합 목록 페이지예요. 시맨틱 토큰을 기준으로 기본 테마(Light, Default contrast) 하에서 어떤 색 값이 적용되는지 한눈에 확인할 수 있어요.
출처: 문서
본문
기본 테마 | Light | Default contrast
시맨틱 토큰 (Semantic tokens | 기본 테마 Light | 기본 대비 Default contrast)
1 - 20 / 563 (총 563개 중 1~20번째, 총 29페이지)
| 이름 | 값 | 설명 |
|---|---|---|
--pf-t--global--icon--color--brand--default |
#0066cc |
브랜드를 나타내거나 브랜드 색 텍스트와 짝을 이루는 아이콘의 색으로 사용합니다. |
--pf-t--global--icon--color--brand--hover |
#004d99 |
브랜드를 나타내거나 브랜드 색 텍스트와 짝을 이루는 아이콘의 호버 상태 색으로 사용합니다. |
--pf-t--global--icon--color--brand--clicked |
#004d99 |
브랜드를 나타내거나 브랜드 색 텍스트와 짝을 이루는 아이콘의 클릭 상태 색으로 사용합니다. |
--pf-t--global--icon--color--on-brand--default |
#ffffff |
브랜드 배경색 위에 배치되거나 on-brand 색 텍스트와 짝을 이루는 아이콘의 기본 색으로 사용합니다. |
--pf-t--global--icon--color--on-brand--hover |
#ffffff |
브랜드 배경색 위에 배치되거나 on-brand 색 텍스트와 짝을 이루는 아이콘의 호버 상태 색으로 사용합니다. |
--pf-t--global--icon--color--on-brand--clicked |
#ffffff |
브랜드 배경색 위에 배치되거나 on-brand 색 텍스트와 짝을 이루는 아이콘의 클릭 상태 색으로 사용합니다. |
--pf-t--global--icon--color--favorite--default |
#ffcc17 |
즐겨찾기 처리된 아이콘의 색으로 사용합니다(보통 별표 또는 즐겨찾기 아이콘에 적용). |
--pf-t--global--icon--color--favorite--hover |
#dca614 |
즐겨찾기 처리된 아이콘의 호버 상태 색으로 사용합니다(보통 별표 또는 즐겨찾기 아이콘에 적용). |
--pf-t--global--icon--color--favorite--clicked |
#dca614 |
즐겨찾기 처리된 아이콘의 클릭 상태 색으로 사용합니다(보통 별표 또는 즐겨찾기 아이콘에 적용). |
--pf-t--global--icon--color--status--success--default |
#3d7317 |
성공 상태를 알리는 텍스트의 기본 색으로 사용합니다. |
--pf-t--global--icon--color--status--success--hover |
#204d00 |
성공 상태를 알리는 텍스트의 호버 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--success--clicked |
#204d00 |
성공 상태를 알리는 텍스트의 클릭 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--on-success--default |
#ffffff |
성공 배경색 위에 배치되거나 on-success 색 텍스트와 짝을 이루는 아이콘의 기본 색으로 사용합니다. |
--pf-t--global--icon--color--status--on-success--hover |
#ffffff |
성공 배경색 위에 배치되거나 on-success 색 텍스트와 짝을 이루는 아이콘의 호버 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--on-success--clicked |
#ffffff |
성공 배경색 위에 배치되거나 on-success 색 텍스트와 짝을 이루는 아이콘의 클릭 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--warning--default |
#dca614 |
경고 상태를 알리는 텍스트의 기본 색으로 사용합니다. |
--pf-t--global--icon--color--status--warning--hover |
#b98412 |
경고 상태를 알리는 텍스트의 호버 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--warning--clicked |
#b98412 |
경고 상태를 알리는 텍스트의 클릭 상태 색으로 사용합니다. |
--pf-t--global--icon--color--status--on-warning--default |
#1f1f1f |
경고 배경색 위에 배치되거나 on-warning 색 텍스트와 짝을 이루는 아이콘의 기본 색으로 사용합니다. |
--pf-t--global--icon--color--status--on-warning--hover |
#1f1f1f |
경고 배경색 위에 배치되거나 on-warning 색 텍스트와 짝을 이루는 아이콘의 호버 상태 색으로 사용합니다. |
위 목록은 총 563개의 시맨틱 토큰 중 첫 페이지(20개)만 보여 준 예시예요. 원문 페이지에서는 목차 정의(CSS variable), 기본값(Value), 용도 설명(Description)을 표로 확인하며 페이지네이션으로 29페이지에 걸쳐 전체 토큰을 탐색할 수 있어요.