색

어떤 색이 있고 각 색이 무슨 역할인지 정한다. 어떤 상태일 때 무엇을 쓰는지는 상태 문서에 있다.

색을 바꾸는 방법 두 가지

/* 1) 화면 전체 */
import "@nui-kit/react/styles/index.css";
import "./nui-theme.css";

/* 2) 한 컴포넌트 — !important 는 필요 없다 */
.my-tooltip {
  background: #222;
  color: #fff;
}

역할별 색

className 으로 색을 맞출 때 아래 이름을 참조한다.

글자

글자로 쓸 수 있는 단계는 11번과 12번뿐이다. 9번과 10번은 채워진 배경 자리라 글자로 쓰면 대비가 3점대로 떨어진다. text-disabled 만 9번을 쓴다. 비활성 요소는 WCAG 대비 요구에서 빠지기 때문이다.

면

면은 콘텐츠를 담는 것의 배경이다. 글자나 아이콘이 아니라 화면의 층을 만든다. 층의 순서는 깊이 문서에 있다.

선

선 색은 굵기가 아니라 등장 빈도로 나눈다. 고르는 기준과 두께는 모양과 선 문서에 있다.

액션

액션은 버튼 계열이다. 색이 아니라 역할이 이름이라 이 버튼이 삭제인지만 물으면 정해진다. 각 역할의 -fg 는 그 배경 위에서 대비 4.5 대 1 을 넘는 글자색이다. -hover 와 -active 는 같은 색조의 다음 단계다. 누르는 순간 색이 한 단계씩 진해지고, 그림자나 투명도로 표현하지 않는다. 정부 가이드라인(KRDS)의 상태 색 규칙이다.

입력 컨트롤

입력 컨트롤 색은 Textfield 와 Select, Checkbox 처럼 값을 받는 것들이 공유한다.

상태 표시

상태 표시는 알림이나 배지처럼 은은한 면으로 알릴 때 쓴다.

12단계 팔레트

모든 색이 12단계를 갖고 단계마다 쓸 자리가 정해져 있다. 어느 색을 쓰든 입력 테두리는 9번, 채워진 배경도 9번, hover 는 10번이다. 테두리를 9번에 두는 이유는 배경과 3 대 1 이 넘어야 저시력 사용자에게도 보이기 때문이다.

다크 테마

OS 가 다크면 아무 설정 없이 다크로 그려진다. 순서는 셋이다. data-theme="dark" 를 주면 그것이 이기고, 없으면 OS 설정을 따르고, data-theme="light" 를 주면 OS 가 다크여도 라이트를 유지한다.

바뀌는 것은 12단계 값뿐이다. action-primary 같은 역할 이름은 그대로라 컴포넌트 CSS 는 고칠 것이 없다. 예외는 셋 — 층(layer-*)은 "위가 밝다"를 지키려고 순서를 바꾸고, 토스트·툴팁 위 글자(text-on-inverse)는 표면이 밝아지므로 어두워지고, 에러 토스트 배경이 진해진다.

팔레트 전량

컴포넌트는 팔레트를 직접 참조하지 않는다. 참조하면 브랜드 색을 바꿔도 그 컴포넌트만 옛 색으로 남는다.