pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — nur in CSS ausgeführte Farbmathematik, die den InstUI-@instructure/ui-color-utils Hilfsfunktionen (alpha, darken, lighten, overlayColors) spiegelt.

InstUI berechnet diese zur Build-Zeit mit tinycolor2 gegen konkrete Hex-Werte. pantoken gibt var(--instui-*)-Referenzen aus, die im Browser aufgelöst werden (häufig über light-dark()), daher muss die Mathematik stattdessen in CSS erfolgen. Jeder Helper liefert einen CSS-Farbstring, der aus color-mix() und relativer Farbsyntax aufgebaut ist — beides grundlegende moderne Browser-Features — sodass ein einzelner Ausdruck dem Token folgt, selbst wenn es sich um ein schemaabhängiges light-dark()-Paar handelt. Verwende sie überall dort, wo du sonst einen abgeleiteten Farbton fest kodiert hättest.

Beispiel ​

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

Typ-Aliasse ​

Funktionen ​