pantoken / plugins/pantoken/colors/src / onColor

Συνάρτηση: onColor()

onColor(surface, threshold?): string

Βήτα

Το αναγνώσιμο προσκήνιο — μαύρο ή λευκό — για περιεχόμενο τοποθετημένο πάνω σε surface. Αυτή είναι η μορφή μόνο-με-CSS των επαναλαμβανόμενων παραλλαγών *-on-color του InstUI (ένα δαχτυλίδι εστίασης σε ένα brand κουμπί, το κείμενο ενός primary-inverse κουμπιού, ένα εικονίδιο σε χρωματισμένη επιφάνεια): αντί για ένα σταθερό inverse token, επιλέγει την αντίθεση από την ίδια την επιφάνεια, ώστε να παραμένει σωστό καθώς αλλάζει η επιφάνεια.

Διαβάζει την φωτεινότητα (lightness) της επιφάνειας σε OKLCH μέσω σύνταξης σχετικής χρωματικής τιμής και την στρογγυλοποιεί σε 0 (μαύρο) ή 1 (λευκό) στο threshold χρησιμοποιώντας το κόλπο clamp calc(… * infinity) — χωρίς JS, χωρίς σταθερό hex.

Παράμετροι

surface

string

Το χρώμα του φόντου πάνω στο οποίο κάθεται το περιεχόμενο (κυριολεκτικό, var(--token), ή ένας εμφωλευμένος helper).

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