pantoken / plugins/pantoken/colors/src / onColor

Fonction: onColor()

onColor(surface, threshold?): string

Bêta

La couleur de premier plan lisible — noire ou blanche — pour le contenu placé sur surface. Il s'agit de la forme uniquement CSS des variantes récurrentes *-on-color d'InstUI (un anneau de focus sur un bouton de marque, le texte d'un bouton primary-inverse, une icône sur une surface colorée) : plutôt qu'un token inverse fixe, elle choisit le contraste à partir de la surface elle‑même, de sorte qu'il reste correct lorsque la surface change.

Elle lit la luminosité OKLCH de la surface via la syntaxe de couleur relative et l'aligne sur 0 (noir) ou 1 (blanc) à threshold en utilisant l'astuce de clamp calc(… * infinity) — pas de JS, pas d'hexadécimal fixe.

Paramètres

surface

string

La couleur d'arrière‑plan sur laquelle le contenu repose (littérale, var(--token), ou un utilitaire imbriqué).

threshold?

number = 0.62

Luminosité OKLCH (0–1) au‑delà de laquelle la surface est considérée comme « claire » (valeur par défaut 0.62).

Renvoie

string

Une expression oklch(from …) résolvant en noir ou blanc.

Exemple

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