pantoken / colors

colors ​

Bèta

@pantoken/plugin-colors — CSS-only kleurberekeningen die de InstUI @instructure/ui-color-utils helpers (alpha, darken, lighten, overlayColors) nabootsen.

InstUI berekent deze tijdens buildtijd met tinycolor2 op concrete hex-waarden. pantoken geeft var(--instui-*)-referenties uit die in de browser worden opgelost (vaak via light-dark()), dus de berekeningen moeten in CSS plaatsvinden. Elke helper retourneert een CSS-kleurstring opgebouwd uit color-mix() en relative color syntax — beide baseline moderne-browserfuncties — zodat één expressie het token volgt, zelfs wanneer het een schemagerelateerd light-dark()-paar is. Gebruik ze overal waar je anders een afgeleide tint hard-codeert.

Voorbeeld ​

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

Type-aliases ​

Functies ​