pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — CSS-only fargeberegning som speiler InstUI @instructure/ui-color-utils hjelpere (alpha, darken, lighten, overlayColors).

InstUI beregner disse ved byggetid med tinycolor2 mot konkrete hex-verdier. pantoken emitterer var(--instui-*)-referanser som løses i nettleseren (ofte gjennom light-dark()), så beregningen må skje i CSS i stedet. Hver hjelper returnerer en CSS-fargestreng bygget fra color-mix() og relative color syntax — begge er grunnleggende moderne nettleserfunksjoner — slik at ett enkelt uttrykk følger tokenet selv når det er et skjema-avhengig light-dark()-par. Bruk dem der du ellers ville hardkodet en avledet nyanse.

Eksempel ​

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

Typealiaser ​

Funksjoner ​