pantoken / plugins/pantoken/colors/src / onColor

Función: onColor()

onColor(surface, threshold?): string

Beta

El primer plano legible — negro o blanco — para contenido colocado sobre surface. Esta es la forma solo-CSS de las variantes recurrentes *-on-color de InstUI (un anillo de enfoque en un botón de marca, el texto de un botón primary-inverse, un icono sobre una superficie coloreada): en lugar de un token inverso fijo, obtiene el contraste de la propia superficie, por lo que permanece correcto conforme la superficie cambia.

Lee la claridad OKLCH de la superficie mediante la sintaxis de color relativa y la ajusta a 0 (negro) o 1 (blanco) en threshold usando el truco de clamp calc(… * infinity) — sin JS, sin hex fijo.

Parámetros

surface

string

El contenido del color de fondo sobre el que se coloca (literal, var(--token) o un ayudante anidado).

threshold?

number = 0.62

Claridad OKLCH (0–1) por encima de la cual la superficie se considera "clara" (por defecto 0.62).

Devuelve

string

Una expresión oklch(from …) que se resuelve en negro o blanco.

Ejemplo

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)"