pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — izključno CSS-barvna matematika, ki zrcali InstUI @instructure/ui-color-utils pomočnike (alpha, darken, lighten, overlayColors).

InstUI jih izračuna ob času sestave z uporabo tinycolor2 na konkretnih heks vrednostih. pantoken izda var(--instui-*) reference, ki se razrešijo v brskalniku (pogosto preko light-dark()), zato mora biti matematika izvedena v CSS‑u. Vsak pripomoček vrne CSS niz barve, sestavljen iz color-mix() in relativne barvne sintakse — oba sta sodobni funkciji osnovnih brskalnikov — tako ena sama izražba sledi tokenu tudi, ko gre za par light-dark(), odvisen od sheme. Uporabljajte jih kjerkoli bi sicer trdo kodirali izpeljan odtenek.

Primer ​

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

Alias tipi ​

Funkcije ​