pantoken-root / plugins/pantoken/colors/src / onColor

Fonction: onColor()

onColor(surface, threshold?): string

Bêta

La couleur de premier plan lisible — noir ou blanc — 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 mise au point sur un bouton de marque, le texte d'un bouton primary-inverse, une icône sur une surface colorée) : plutôt qu'un jeton inverse fixe, elle choisit le contraste à partir de la surface elle‑même, de sorte qu'elle reste correcte lorsque la surface change.

Elle lit la clarté OKLCH de la surface via la syntaxe de couleur relative et la ramène à 0 (noir) ou 1 (blanc) à threshold en utilisant l'astuce de clamp calc(… * infinity) — pas de JS, pas d'hex 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

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

Retourne

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