pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — endast-CSS färgmatematik som speglar InstUI:s @instructure/ui-color-utils hjälpare (alpha, darken, lighten, overlayColors).

InstUI beräknar dessa vid byggtid med tinycolor2 mot konkreta hexvärden. pantoken emitterar var(--instui-*)-referenser som löses upp i webbläsaren (ofta via light-dark()), så beräkningen måste istället ske i CSS. Varje hjälpfunktion returnerar en CSS-färgsträng byggd från color-mix() och relative color syntax — båda är grundläggande funktioner i moderna webbläsare — så ett enda uttryck spårar token även när det är ett schemaberoende light-dark()-par. Använd dem där du annars skulle hårdkoda en härledd nyans.

Exempel ​

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

Typalias ​

Funktioner ​