pantoken / colors

colors ​

Beta

@pantoken/plugin-colors — operazioni sui colori solo in CSS che rispecchiano gli helper di InstUI @instructure/ui-color-utils (alpha, darken, lighten, overlayColors).

InstUI le calcola al momento della build con tinycolor2 su valori esadecimali concreti. pantoken emette riferimenti var(--instui-*) che si risolvono nel browser (spesso tramite light-dark()), quindi i calcoli devono avvenire nel CSS. Ogni helper restituisce una stringa colore CSS costruita da color-mix() e relative color syntax — entrambi funzionalità moderne di base dei browser — così una singola espressione segue il token anche quando è una coppia light-dark() dipendente dallo schema. Usali ovunque altrimenti codificheresti manualmente una tonalità derivata.

Esempio ​

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

Alias di tipo ​

Funzioni ​