pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — CSS-only fargematematikk som speglar InstUI @instructure/ui-color-utils hjelparar (alpha, darken, lighten, overlayColors).

InstUI reknar desse ut ved byggjetid med tinycolor2 mot konkrete hex-verdier. pantoken emitterer var(--instui-*)-referansar som blir løyst i nettlesaren (ofte via light-dark()), så rekninga må skje i CSS i staden. Kvar hjelpar returnerer ei CSS-farge-streng bygd frå color-mix() og relative color syntax — begge er standard funksjonar i moderne nettlesarar — så eitt enkelt uttrykk held styr på tokenet sjølv når det er eit skjemavhengig light-dark()-par. Bruk dei der du elles ville ha hardkodet ein avleidd nyanse.

Døme ​

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

Typealias ​

Funksjonar ​