pantoken / plugins/pantoken/colors/src / onColor

함수: onColor()

onColor(surface, threshold?): string

베타

콘텐츠가 surface 위에 배치될 때 읽기 쉬운 전경색 — 검정 또는 흰색입니다. 이는 InstUI의 반복되는 *-on-color 변형(브랜드 버튼의 포커스 링, primary-inverse 버튼의 텍스트, 색이 있는 면 위의 아이콘)의 CSS 전용 형태입니다: 고정된 역색 토큰 대신 표면 자체에서 대비를 선택하므로 표면이 바뀌어도 올바르게 유지됩니다.

상대 색상 구문을 통해 표면의 OKLCH 명도 값을 읽고, 0(검정) 또는 1(흰색)로 threshold에서 스냅하며, calc(… * infinity) clamp 트릭을 사용합니다 — JS 불필요, 고정된 16진수 불필요.

매개변수

surface

string

배경 색상 콘텐츠가 놓이는 대상(리터럴, var(--token) 또는 중첩된 헬퍼).

threshold?

number = 0.62

표면을 "밝음"으로 간주하는 OKLCH 명도(0–1) 임계값(기본값 0.62).

반환값

string

검정 또는 흰색으로 해석되는 oklch(from …) 식 표현입니다.

예제

onColor("var(--instui-color-background-brand)"); // white on a dark brand surface, black on a light one
// → "oklch(from var(--…-brand) clamp(0, (0.62 - l) * infinity, 1) 0 0)"