pantoken / plugins/pantoken/colors/src / onColor

Funktio: onColor() ​

onColor(surface, threshold?): string

Beta

Luettavissa oleva etualan väri — musta tai valkoinen — sisältöä varten, joka sijoitetaan päälle surface. Tämä on pelkkään CSS:ään perustuva muoto InstUI:n toistuvista *-on-color-varianteista (brändipainikkeen fokuskehys, primary-inverse-painikkeen teksti, kuvake värillisellä pinnalla): kiinteän käänteistunnisteen sijaan se valitsee kontrastin itse pinnasta, joten se pysyy oikeana pinnan muuttuessa.

Se lukee pinnan OKLCH-valonvoimakkuuden suhteellisella värisyntaksilla ja napauttaa sen 0:ksi (musta) tai 1:ksi (valkoinen) kohdassa threshold käyttäen calc(… * infinity)-clamp-temppua — ei JS:ää, ei kiinteää heksaa.

Parametrit ​

surface ​

string

Taustaväri, jonka päällä sisältö sijaitsee (kirjaimellinen, var(--token) tai sisäkkäinen apuri).

threshold? ​

number = 0.62

OKLCH-valonvoimakkuus (0–1), jonka yläpuolella pinta lasketaan "vaaleaksi" (oletus 0.62).

Palauttaa ​

string

oklch(from …)-lauseke, joka ratkaistaan mustaksi tai valkoiseksi.

Esimerkki ​

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