pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — pelkkään CSS:ään perustuva värilaskenta, joka peilaa InstUI:n @instructure/ui-color-utils apufunktioita (alpha, darken, lighten, overlayColors).

InstUI laskee ne rakennusaikana käyttämällä tinycolor2‑menetelmää konkreettisia heksavärejä vastaan. pantoken tuottaa var(--instui-*)‑viittauksia, jotka ratkaistaan selaimessa (usein light-dark()n kautta), joten laskennan täytyy tapahtua CSS:ssä. Kukin apu palauttaa CSS‑värimerkkijonon, joka rakentuu color-mix() ja suhteellisen värisyntaksin — molemmat nykyselainten perusominaisuuksia — joten yksi lauseke seuraa tokenia myös silloin, kun se on väriteemasta riippuva light-dark()‑pari. Käytä niitä siellä, missä muuten kovakoodaisit johdetun sävyn.

Esimerkki ​

ts
import { alpha, darken } from "@pantoken/plugin-colors";

// A subtle brand-tinted hover, derived from the brand token (mirrors InstUI's ghost hover).
const hover = alpha(darken("var(--instui-color-institutional-brand-button-primary-bgd)", 10), 10);
// → "color-mix(in srgb, hsl(from var(--…brand-…) h s calc(l - 10)) 10%, transparent)"

Tyyppialiasit ​

Funktionit ​